jQThumb.js – jQuery缩略图插件-BFW插件库

jQThumb.js – jQuery缩略图插件

jQThumb.js – jQuery缩略图插件,将大小不规则的图片统一缩放成同一尺寸，不变形，不压缩，非常方便

属性/方法	类型	默认值	说明
classname		‘jqthumb’	缩略图容器的 class
width	整数	100	缩略图的宽度，单位为 px
height	整数	100	缩略图的高度，单位为 px
position		{top:’50%’, left:’50%’}	缩略图的位置，默认为 50%，即水平并且垂直居中
source	字符串	‘src’	指定图像源属性，默认为 src
showoncomplete	布尔值	true	处理后时候立即显示，如果为 false 则不自动显示，需要额外设置让它显示，比如使用回调函数 after、done
before	函数		处理前的回调函数
after	函数		某一个图片处理后的回调函数
done	函数		所有图片处理后的回调函数

第一步引入bfwone，加载依赖项jquery

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jqthumb.min"], function() {
                $('.bfwcont2 img').jqthumb({
                    width: 200,
                    height: 200,
                    after: function(imgObj) {
                        imgObj.css('opacity', 0).animate({
                            opacity: 1
                        }, 2000);
                    }
                });
            });
        });
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bfwcont {
            width: 920px;
            margin: 0 auto;
            list-style-type: none;
            zoom: 1;
        }
        .bfwcont:after {
            content: '';
            display: table;
            clear: both;
        }
        .bfwcont li {
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px 10px 0;
            display: inline;
        }
        .bfwcont1 {
            border: 5px solid #d9534f;
        }
        .bfwcont1 img {
            width: 200px;
            height: 200px;
            vertical-align: top;
        }
        .bfwcont2 {
            border: 5px solid #5cb85c;
        }

    </style>
</head>
<body>
    <h1>jQuery缩略图插件jQThumb演示</h1>

    <p class="explain" style="text-align: center;">
        一共有8张尺寸各不同的图片，红色方框里的图片是用样式固定死的，明显有拉伸的现象。而绿色方框里的是使用插件创建的，没有拉伸，效果好很多。
    </p>

    <ul class="bfwcont">
        <li class="bfwcont1"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="美女1"></li>
        <li class="bfwcont1"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="美女2"></li>
        <li class="bfwcont1"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="美女3"></li>
        <li class="bfwcont1"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="美女4"></li>
         <li class="bfwcont2"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="美女1"></li>
        <li class="bfwcont2"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="美女2"></li>
        <li class="bfwcont2"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="美女3"></li>
        <li class="bfwcont2"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="美女4"></li>
    </ul>
</body>
</html>

jQThumb.js – jQuery缩略图插件

网友评论0

jquery.qrcode.min.js

cropper.js

pix.0.8.5.min.js

compressphoto.js

jquery.photoClip.js

croppie.js

Jcrop.js

jquery.jqzoom.js

elastislide.js

smoothproducts.js