smartJQueryZoom(smartZoom) 的使用方法

smartZoom 是一個我很喜歡用的庫。

但是這個庫有一些不完善的地方。

比如BUG。

比如使用上可能遇到的問題。

    <article>      
      <div id="zoom_box" class="zoom-box" style="display: none">
        <img>
      </div>
    </article>

 

比如說，我們想用 smartZoom 渲染這個img。

前提條件：這個庫依賴 jQuery.

首先，它的父元素的寬高必須是個像素值。設 100% 可能會出問題。

可以用 jquery 計算並賦值寬高。

      // 加數字值和項目樣式有關 不通用
      $("#zoom_box").css({
        width: $("article").width() + 40 + 'px',
        height: $("article").height() + 25 + 'px',
      })

 

其次。

不要給你想渲染的 img 設寬高。像素值和 100% 什么的都不需要。

最后調用渲染一下就好。

      $("#zoom_box img").smartZoom({
        'dblClickEnabled': false,
        'containerBackground': "#000"
      });

 

渲染時的參數，github 上有說明。

options = {'top' : '0', // top 像素值 一般用不上
           'left' : '0', // left 像素值 一般用不上
           'width' : '100%', // 寬度 如果你不希望圖片的顯示區域是這個DIV全部區域，那么需要設置一下
           'height' : '100%', // 高度 同上 
           'easing' : 'smartZoomEasing', // jquery easing 函數 如果瀏覽器不支持CSS3 那么需要寫一下
           'maxScale' : 3, // 最大放大倍率
           'dblClickMaxScale' : 1.8, // 雙擊時的最大放大倍率
           'mouseEnabled' : true, // 是否可以用鼠標與渲染區域交互
           'scrollEnabled' : true, // 是否可以用滾輪縮放圖片
           'dblClickEnabled' : true, // 是否可以雙擊放大圖片
           'mouseMoveEnabled' : true, // 是否支持鼠標移動交互
           'moveCursorEnabled' : true, // 是否可以鼠標拖動圖片
           'touchEnabled' : true, // 是否支持觸摸交互（觸摸屏）
           'dblTapEnabled' : true, // 是否支持觸摸雙擊（觸摸屏）
           'pinchEnabled' : true, // enable zoom when user pinch on target
           'touchMoveEnabled' : true, // 是否可以通過觸摸事件拖動圖片
           'containerBackground' : '#FFFFFF', // 如果不用樣式表，那么可以設置背景色，透明背景需要設為 transparent
           'containerClass' : ''// 用的樣式表 定制化樣式時會用到
          } 

以上。

 

2019.08.16 更新：

實際上，想給 img 設寬高100%也是可以的。但是DOM結構要改一下。

      <div id="zoom_box" class="zoom-box" style="display: none">
        <div id="inner" class="inner">
          <img>
        </div>
      </div>

此時，現在的 div#inner 相當於以前的 img。現在的 img 寬高是 100% ，永遠和 div#inner 一樣大。

      // inner 的寬度用 inner 的高度和圖片比例去計算
      $("#inner").css({
        width: ($("article").height() + 25) * (1440 / 810) + 'px',
        height: ($("article").height() + 25) + 'px',
      })

渲染方法也需要改一下。

      $("#zoom_box #inner").smartZoom({
        'dblClickEnabled': false,
        'containerBackground': "#000"
      });

也就是說，以前 smartzoom 渲染綁在 img 上，現在綁在 div#inner 上。

OVER。