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

最新推荐文章于 2022-12-02 17:01:40 发布

weixin_34413065

最新推荐文章于 2022-12-02 17:01:40 发布

阅读量151

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lkd3063601/p/4272868.html

版权

插件介绍

项目中有图片的时候，有的宽大于高，有的宽小于高，尤其在做图片列表的时候，经常发现缩略图会有变形的。我们怎样来解决这一问题呢。

方法一：用photoshop来处理缩略图。小的项目还可以，大的项目，这样做难免会累的半死；

方法二：用jqthumb.js这款插件，只需要写上几句话，就可以让我们的项目中的缩略图快速解决！

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

下载地址： http://pan.baidu.com/s/1jG5lT1W

简单使用

<!DOCTYPE html>
<html lang="en">
<body>
    <div style="width: 800px; height: 800px;">
        <img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
    </div>
    <div style="width: 200px; height:500px;">
        <img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
    </div>

    <script src="jquery.js"></script>
    <script type="text/javascript" src="jqthumb.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('img').jqthumb({
                classname: 'jqthumb',
                width: '100%',
                height: '100%',
                position: {
                    x: '50%',
                    y: '50%'
                },
                source: 'src',
                show: false,
                responsive: 20,
                zoom: 1,
                method: 'auto',

                after: function (imgObj) {
                    console.log(imgObj);
                },
                done: function (imgArray) {
                    for (i in imgArray) {
                        $(imgArray[i]).fadeIn();
                    }
                }
            });

        });
    </script>
</body>

</html>