jquery鼠标滚轮中心点缩放元素插件

jquery鼠标滚轮中心点缩放元素插件

bfwzoom.js插件通过改变对象的scale属性来实现缩放,缩放时检测鼠标中心点,按照中心点进行缩放,非常方便

使用方式:

第一步引入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="//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="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png">
        </div>
    </div>
</body>
</html>

		



立即下载bfwzoom.js查看所有js插件

网友评论0

程序员在线工具箱