Zooming

Zooming 是一款纯 javascript 图片缩放库，主要特点有：

• 不依赖其他库，纯 JavaScript 实现，支持移动设备；
• 流畅的动画；
• 可缩放高清图像；
• 易于集成和定制。

• 使用方法

  1、引入文件

  <script src="js/zooming.min.js"></script>

  2、HTML

  <a href="images/1.jpg">
      <img class="img-zoomable" src="images/1s.jpg" alt="">
  </a>

  或者使用 data 属性：

  <img src="images/2s.jpg" data-action="zoom" data-original="images/2.jpg" alt="">

  3、JavaScript

  var zooming = new Zooming();
  zooming.listen('.img-zoomable');

  配置

  属性

  名称	类型	默认值	说明
  defaultZoomable	字符串	img[data-action=”zoom”]	缩放元素，可以是 css 选择器
  enableGrab	布尔值	true	是否能够抓取移动
  preloadImage	布尔值	true	是否预加载图片
  transitionDuration	整数/小数	0.4	动画持续时间
  transitionTimingFunction	字符串	cubic-bezier(0.4, 0, 0, 1)	动画函数
  bgColor	字符串	rgb(255, 255, 255)	遮罩背景颜色
  bgOpacity	整数/小数	1	遮罩透明度
  scaleBase	整数/小数	1	缩放比例，默认为适应窗口大小
  scaleExtra	整数/小数	0.5	抓取图像时额外缩放比例
  scrollThreshold	整数	40	关闭前需要多少滚动
  customSize		null	缩放到指定的宽度和高度，如果设置该属性，将忽略 scaleBase 属性
  onOpen		null	放大后的回调函数
  onClose		null	关闭后的回调函数
  onRelease		null	松开后的回调函数
  onBeforeOpen		null	放大前的回调函数
  onBeforeClose		null	关闭前的回调函数
  onBeforeGrab		null	抓取前的回调函数
  onBeforeMove		null	移动前的回调函数
  onBeforeRelease		null	松开前的回调函数

 

演示地址：http://www.dowebok.com/demo/223/

GitHub 地址：https://github.com/kingdido999/zooming