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。