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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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

<ul class="erdangjiade">
    <li class="erdangjiade1"><img src="images/1.jpg" alt="美女1"></li>
    <li class="erdangjiade1"><img src="images/2.jpg" alt="美女2"></li>
    <li class="erdangjiade1"><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

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

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