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>
{{collectdata}}
网友评论0