zoukankan      html  css  js  c++  java
  • jqthumb.js缩略图插件-让缩略图正常显示而不变形

    插件介绍

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

    方法一:用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=" 800px; height: 800px;">
            <img src="http://img1.ph.126.net/P-PDJa_xvMnLY-10Rr-tEw==/3084684269789354051.jpg" class="example1" />
        </div>
        <div style=" 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',
                    '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>

  • 相关阅读:
    Ibatis 使用心得
    java.net.ConnectException: Connection timed out
    ZK 最少限度加载页面js文件
    JAVA 获取网页流
    ZK 页面间参数传递
    删除 TOMCAT 上次关闭遗留下来的 SESSION 缓存
    Java 异常java.lang.IllegalArgumentException: Illegal group reference
    ZK textbox Constraint验证
    zk textbox 更改字体大小及高度
    通过http管理solrcore
  • 原文地址:https://www.cnblogs.com/lkd3063601/p/4272868.html
Copyright © 2011-2022 走看看