bfwzoom,jquery中心点缩放元素插件
今天给大家带来一款jquery中心点缩放元素插件bfwzoom.js
以往大家缩放的时候直接加一个onmousewheel的事件,更改对象的zoom值实现,如下面这段代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> </head> <body> <img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png"BfwOnmousewheel="return zoomImg(this)"> <div style="width:100px;height:100px;background-color: red"BfwOnmousewheel="return zoomImg(this)"></div> <script> function zoomImg(obj) { // 一开始默认是100% let zoom = parseInt(obj.style.zoom, 10) || 100; // 滚轮滚一下wheelDelta的值增加或减少120 zoom += event.wheelDelta/12; if (zoom > 0) { obj.style.zoom = zoom + '%'; } return false; } </script> </body> </html>虽然可以鼠标滚动缩放,但是没有中心点,体验很差,那么有没有一种中心点缩放的插件呢,有,bfwzoom就实现了
使用方式:
第一步引入bfwone 加载依赖项jquery-3.2.1.min
第二步配置参数
new bfwzoom($('#container'), 4, 0.5);第一个参数是缩放的对象容器,第二个是缩放最大级别4倍,第三个参数是鼠标滚轮滚动一次缩放的大小
示例如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery-3.2.1.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["bfwzoom"], function() { new bfwzoom($('#container'), 4, 0.5); }); }); </script> <style type="text/css"> #container { width: 500px; height: 500px; overflow: hidden; } #slide { width: 100%; height: 100%; transition: transform .3s; } img { width: auto; height: auto; max-width: 100%; } </style> </head> <body> <div id="container"> <div id="slide"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png"> </div> </div> </body> </html>
网友评论0