• jQuery 插件 居中容器内的图片


    最近突然来了兴趣,把很久前写的Ajax请求状态管理器重构了下,随后写了篇介绍小文与大家分享了。然后,又把我的博客改版了下,有时候发现之前喜欢的样式,慢慢会看厌了,就花了时间改观改观吧。

    今天我想介绍一个大家在平日里会经常遇到的一个问题--图片在容器中的居中。图片在容器中水平及垂直居中其实很简单,甚至可以只通过CSS就能搞定。例如用display: table;,然后在图片外加个容器,定义display: table-cell; vertical-align: middle; text-align: center;,如果再需要限制图片的大小以防超出到容器之外,只要定义上max-width和max-height,是不是很简单!如果用javascript解决这个问题更简单了,只要计算下位置就OK了,相关计算方式你google下到处都是。

    但是,有一个问题,上面的CSS定义在有些浏览器中很难实现,比如IE。所以你必须借助javascript实现。如果经常要用到,不如写个插件来的方便。这个插件中要理解一点是,图片加载完成的load事件和图片地址src赋值的顺序。在有的浏览器中图片src必须写在load事件之后,否则不会触发load事件,下面来详细介绍下我写的插件。

    使用方式如普通jQuery插件一样:

    $( selector ).center( arguments );

    有3个参数可定义:
    • src:string,图片地址;
    • maxWidth:number,图片最大宽度;
    • maxHeight:number,图片最大高度。

    该插件对动态地址的图片显示还是蛮灵活的,特别是图库显示。当然你可以进一步扩展她。

    Demo打包下载:jQuery居中图片插件

  • 相关阅读:
    多对多关系表的创建方式、forms组件
    SweetAler弹框插件与分页器插件
    Django数据库查询优化与AJAX
    django orm(2)
    Django orm(1)
    Django之视图层与模板层
    Django之路由层
    初识Django之前端后端与数据库的配置
    面试题49
    web框架之初识Django
  • 原文地址:https://www.cnblogs.com/nicolaszhao/p/2473564.html
Copyright © 2020-2023  润新知