生成缩略图的jQuery插件：jQThumb_Jquery教程

导读：jQThumb 是在Web页面中创建按照一定比例显示缩略图的 jQuery 插件，使用 jQThumb 生成图片的缩略图可以避免不同尺寸的图片出现拉伸或...

jQThumb 是在Web页面中创建按照一定比例显示缩略图的 jQuery 插件，使用 jQThumb 生成图片的缩略图可以避免不同尺寸的图片出现拉伸或者压缩等失真现象，通过设置插参数，还可以控制显示图片的位置。该插件兼容性强，甚至能在 IE6 和 jQuery v1.3 以上版本中正常工作。
jQThumb jQuery缩略图插件的使用方法：

<!DOCTYPE html>

<html>

<body>

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

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

    <script type="text/javascript">

        $(function () {



            // plugin initialization

            $('img').jqthumb({

                classname: 'jqthumb',          // 生成缩略图的 div 类名. 默认是 jqthumb

                width: '100%',             // 剪裁后新图片的宽度. 默认是 100px.

                height: '100%',             // 剪裁后新图片的高度. 默认是 100px.

                position: {

                    x: '50%',                   // 图片 x 方向的位置. 默认 50%. 50% 的意思是图片横向的中心.

                    y: '50%'                    // 图片 Y 方向的位置. 默认 50%. 50% 的意思是图片纵向的中心.

                },

                source: 'src',              // 图像资源的属性. 默认 src.

                show: false,              // TRUE = 处理后立即显示. FALSE = do not show it. DEFAULT IS TRUE.

                responsive: 20,                 // 只在旧的浏览器中使用. 0 to disable. DEFAULT IS 20

                zoom: 1,                  // 放大倍数, 2 图片实际大小的2倍. DEFAULT IS 1

                method: 'auto',             // 3 methods available: "auto", "modern" and "native". DEFAULT IS auto

                before: function (oriImage) { // 每张图片开始处理前回调函数.

                    alert("I'm about to start processing now...");

                },

                after: function (imgObj) {   // 当每张图片剪裁后回调函数.

                    console.log(imgObj);

                },

                done: function (imgArray) { // callback when all images are cropped.

                    for (i in imgArray) {

                        $(imgArray[i]).fadeIn();

                    }

                }

            });



            // kill command

            $('#kill').click(function () {

                $('.example1').jqthumb('kill');

            });



            // kill all command

            $('#kill').click(function () {

                $.jqthumb('killall');

            });

        });

    </script>

    <div style="width: 100%; height: 400px;">

        <img src="path/picture.jpg" />

    </div>

    <div style="width: 400px; height: 400px;">

        <img src="path/picture.jpg" />

    </div>

    <button id="kill">Kill</button>

    <button id="kill-all">Kill All</button>

</body>

</html>

官方地址：: http://pakcheong.github.io/jqthumb/

全站搜索

生成缩略图的jQuery插件：jQThumb

最新推荐

本周排行