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居中图片插件

posted @ 2012-04-27 14:55  nicolaszhao  阅读(...)  评论(... 编辑 收藏