当前位置:主页 > JavsScript库 > 图库 / 图片 >

拖动移动和鼠标滚轮缩放库 - wheel-zoom
栏目分类:图库 / 图片   发布日期:2021-08-21   浏览次数:

Wheel-zoom 是一个普通的 JavaScript 缩放和平移库,它应用拖动来移动和鼠标滚轮来缩放图像或容器内的任何 HTML 内容。

也支持在触摸屏设备上缩放和捏合。

如何使用它:

1. 将wheel-zoom.js库导入 HTML 页面。

<script src="./dist/wheel-zoom.min.js"></script>

2. 在您指定的图像或任何 HTML 内容上初始化库。

const myZoom = WZoom.create('img', { 
  prepare: function (scale,correct_x,correct_y) { 
    // 在准备好图像时做一些事情
  } 
  , rescale: function (scale,correct_x,correct_y, min_scale) { 
    // 做一些事情 image重新缩放
  } 
});

3. 在调整窗口大小时重新初始化库。

window.addEventListener('resize', function () { 
  myZoom.prepare(); 
})

4. 手动放大/缩小图像。

myZoom.zoomUp(); 
myZoom.zoomDown(); 
myZoom.maxZoomUp(); 
myZoom.maxZoomDown();

5. 启用/禁用拖动移动功能。默认值:true

WZoom.create('img', { 
  dragscrollable: false
});

6. 配置 DragScrollable 模块。

WZoom.create('img', { 
  dragScrollableOptions: { 
 
    // 设置松散后平滑消失移动元素
    smoothExtinction: true, 
 
    // 抓取元素后
    onGrab: function(){ 
      // 做某事
    }, 
 
    // 每次移动元素时的刻度
    onMove: function(){ 
      // 做某事
    }, 
 
    // 在删除元素之后
    onDrop: function(){ 
      // 做某事
    } 
 
  } 
});

7. 设置最小/最大允许比例比例。

WZoom.create('img', { 
  maxScale: 1, 
  minScale: null
});

8. 设置调整大小的速度。默认值:10。

WZoom.create(element, { 
  speed: 10 
});

9. 确定内容类型:图像或html。

WZoom.create(element, { 
  type: 'html'
});

10. 如果您启用了 HTML 内容类型,请确定高度和宽度。

WZoom.create(element, { 
  type: 'html', 
  width: 2000, 
  height: 1000 
});

11. 确定是否允许'Zoom On Click'。默认值:true

WZoom.create(element, { 
  zoomOnClick: false
});

12、判断是否监听源图像的变化。默认值:true

WZoom.create(element, { 
  watchImageChange: false
});

13. 确定如何对齐内容:`center`、`left`、`top`、`right` 或`bottom`。默认值:'center'。

WZoom.create(element, { 
  alignContent: 'right'
});

14. 判断是否开启平滑消光。默认值:true。

WZoom.create(element, { 
  smoothExtinction: false
});

15.确定是否禁用插件。默认值:false。

WZoom.create(element, { 
  disableWheelZoom: true
});


官方网站:https://github.com/worka/vanilla-js-wheel-zoom

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库