jquery中心点缩放元素插件bfwzoom

bfwzoom,jquery中心点缩放元素插件

jquery中心点缩放元素插件bfwzoom

今天给大家带来一款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

阿里云香港主机,免备案大优惠 打开浏览器开发html,体验云开发的乐趣bfweditor 打开浏览器即可开发php,bfwstudio
其他文章