第98款插件:jqthumb.js缩略图插件-让缩略图正常显示而不变形

6、参数after,某一个图片处理后的回调函数。步骤:先使图片的长宽为200,再使之透明,再让它在2秒内全部显示!

JavaScript

$('.element2 img').jqthumb({
	width:200,
	height:200,
	after: function(imgObj){
		alert('有一个图片处理后出现alert,点击三次,方出现图片!');
	}
});

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;}