简介

jjqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图，该插件可以通过计算来在老浏览器上生成响应式效果。 在老的浏览器中它能够替代background-size属性。

参数介绍：

使用

1.  引入 jquery.js 和 jqthumb.js 文件

2.  HTML

<div style="width: 100%; height: 400px;">
  <img src="path/picture.jpg" class="example1" />
</div>

<div style="width: 400px; height: 400px;">
  <img src="path/picture.jpg" class="example2" />
</div>

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

3.  调用

<script type="text/javascript">
  $(function(){
    // plugin initialization
    $('img').jqthumb({
      classname: 'jqthumb',
      // class name. DEFUALT IS jqthumb
      width: '100%',
      // new image width after cropping. DEFAULT IS 100px.
      height: '100%',
      // new image height after cropping. DEFAULT IS 100px.
      position:{
        x : '50%',
        // x position of the image. DEFAULT is 50%. 50% also means centerize the image.
        y : '50%'
        // y position of the image. DEFAULT is 50%. 50% also means centerize the image.
      },
      source:'src',
      // to specify the image source attribute. DEFAULT IS src.
      show:false,
      // TRUE = show immediately after processing. FALSE = do not show it. DEFAULT IS TRUE.
      renderPosition:'before',
      // available: "before" and "after".
      onDemand:false,
      // TRUE = load image only when scolling position has reached the DOM
      onDemandEvent:'scroll',
      // available: "scroll", "click", "mouseenter". DEFAULT IS "scroll"
      threshold:0,
      // used when "onDemand" is set to true AND "onDemandEvent" is set to "scroll". Eg. 
      // Start loading the image 200px before scolling position reaches the DOM. DEFUALT IS 0
      responsive:20,
      // used by older browsers only. 0 to disable. DEFAULT IS 20
      zoom:1,
      // zoom the output, 2 would double of the actual image size. DEFAULT IS 1
      method:'auto',
      // 3 methods available: "auto", "modern" and "native". DEFAULT IS auto
      reinit:true,
      // TRUE = to re-init when images is re-initialized for the second time. FALSE = nothing would happen.
      error:function(dom, imgUrl){
        // callback on error, returns image url
        console.log(dom, ' with its url "' + imgUrl + '" is invalid.');
      },
      before:function(oriImage){
        // callback before each image starts processing.
        alert("I'm about to start processing now...");
      },
      after: function(imgObj){
        // callback when each image is cropped.
        console.log(imgObj);
      },
      done:function(imgArray){
        // callback when all images are cropped.
        for(i in imgArray){
          $(imgArray[i]).fadeIn();
        }
      }
    });
    // kill command
    $('#kill').click(function(){
      $('.your-dom').jqthumb('kill');
    });
    // kill all command
    $('#destroy-all').click(function(){
      $.jqthumb('killall');
    });
  });
</script>

相关链接

官方文档 ：  http://pakcheong.github.io/jqthumb/

Github 地址 ：https://github.com/pakcheong/jqthumb