帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

js鼠标滚轮缩放插件(支持图片、html任何内容)

帝国模板之家 2020-11-08 网页特效 评论

wheel zoom是一款JavaScript缩放和平移插件,支持鼠标滚轮缩放图像或容器中任何HTML内容。

使用方法:

1.在html页面中导入wheel-zoom.js库

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

2.初始化插件,在图像或指定的任何HTML内容上。

const myZoom = WZoom.create('img', {
  prepare: function (scale, correct_x, correct_y) {
    // do something when image prepared
  },
  rescale: function (scale, correct_x, correct_y, min_scale) {
    // do something image rescaled
  }
});

3.调整窗口大小时重新初始化插件。

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

4.手动放大/缩小图像方法

myZoom.zoomUp();
myZoom.zoomDown();

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

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

6.监听事件

WZoom.create('img', {
  dragScrollableOptions: {
    // smooth extinction moving element after set loose
    smoothExtinction: true,

    // after grabbing an element
    onGrab: function(){
      // do something
    },

    // every tick when moving element
    onMove: function(){
      // do something
    },

    // after after dropping an element
    onDrop: function(){
      // do something
    }

  }
});

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.确定是否允许“单击缩放”。默认值:true。

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

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言