第98款插件:jqthumb.js缩略图插件-让缩略图正常显示而不变形
案例:使用参数after,注意图片是一个显示完,再显示另一个图片的!
这个功能和jquery.lazyload.js有点儿相似,使用或者查看源代码时,请注意!
JavaScript
$('.element2 img').jqthumb({ width:200, height:200, before: function(imgObj){ imgObj.css('opacity', 0).animate({opacity: 1}, 2000); } });
HTML
<ul class="element"> <li class="element1"><img src="images/1.jpg" alt=""></li> <li class="element2"><img src="images/1.jpg" alt=""></li> </ul>
CSS
.element { width: 920px; margin: 0 auto; list-style-type: none; zoom: 1;} .element:after { content: ''; display: table; clear: both;} .element li { float: left; width: 200px; height: 200px; margin: 20px 10px 0; display: inline;} .element1 { border: 5px solid #d9534f;} .element1 img { width: 200px; height: 200px; vertical-align: top;} .element2 { border: 5px solid #5cb85c;}