jquery.zoom是一款jquery图片滚动放大位置可拖动的插件-BFW插件库

jquery.zoom是一款jquery图片滚动放大位置可拖动的插件

使用方式：

第一步引入 jquery + jquery.zoom.js

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.zoom.js"></script>

第二步创建元素 <div class="box"></div> ，并为其指定宽高；

第三步调用 ezoom 方法，ezoom的第一个参数就是图片的url地址。

完整代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <style type="text/css">
      
        
        .box {
        	width: 560px;
        	height: 560px;
        	background: #eee;
        	border: 1px solid #aaa;
        	/* 	居中，可选	*/
        	margin: 0 auto;
        }
    </style>
</head>

<body style="margin: 0; padding: 0;">
  
    <div class="contorll" style="background: #f7fcff;">
        <!-- 元素容器盒子 -->
        <div class="box"></div>
    </div>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.zoom.js"></script>
    <!-- 	<script type="text/javascript" src="../../../lvdoc_portal/WebContent/js/cursor-effects.js"></script> -->
    <script type="text/javascript">
        $(main);
        
        		function main() {
        			$('.box').ezoom('//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png', function(e) {
        				console.log(e);
        			});
        		}
    </script>
</body>

</html>