jQThumb缩略图插件 - 让缩略图正常显示而不变形

jQThumb 兼容所有浏览器，包括 IE6。在高级浏览器中使用背景方式实现，并设置图片的尺寸（background-size）和位置（background-position）实现居中；在 IE6 等老旧的浏览器中使用图片的方式实现，并使用绝对定位和 margin 实现居中。

淘建站为您提供更多_图片代码_图片插件_缩略图_thumb，在此特别感谢您对我们的支持与厚爱！

HTML

首先我们在.sucaiq放置多张美女图片

<ul class="sucaiq">
    <li class="sucaiq1"><img src="images/1.jpg" alt="美女1"></li>
    <li class="sucaiq1"><img src="images/2.jpg" alt="美女2"></li>
    <li class="sucaiq1"><img src="images/3.jpg" alt="美女3"></li>
.......
</ul>

接着引入jqthumb.js缩略图插件

<script type="text/javascript" src="jquery.js"></script> 
<script src="js/jqthumb.min.js"></script>

jQuery

.sucaiq2下面的所有img 标签的图片成为200*200的缩略图

$(function() {
        $('.sucaiq2 img').jqthumb({
            width: 200,
            height: 200,
            after: function(imgObj) {
                imgObj.css('opacity', 0).animate({opacity: 1}, 2000);
            }
        });
});