jQuery居中容器内的图片的插件 |
| 2021-01-21 22:46:02 35资源网(www.35d.net) |
| jQuery |
下载本资源原文网址：http://www.daima.org/jQuery/jq16097.html 最近突然来了兴趣，把很久前写的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，图片最大高度。
该插件对动态地址的图片显示还是蛮灵活的，特别是图库显示。当然你可以进一步扩展她。 |
|
|
|
|
|
资源大全_资源下载网站：www.35d.net 本站资源仅限研究学习使用，如需商用请联系版权方， 本站事务联系QQ：939804642
|
|
