新建一个html文件，命令为test.html,内容如下：
<!doctype html>
<html lang="en">
<head>
<title>测试文档</title>
<style>
*{
margin:0;
padding:0;
}
a{
text-decoration:none
}
.zoomdiv{
z-index:100;
position:absolute;
top:0px;
left:0px;
width:150px;
height:150px;
background:#ffffff;
border:1px solid #CCCCCC;
display:none;
text-align:center;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="jqueryzoom.css">
</head>
<body>
<div id="preview">
<span class="jqzoom" style="display:inline-block;/*这个属性一定要，不然放大镜就跑外面去了*/">
<img id="bigfrom" style='width:1200px' jqimg="12.png" src="12.png" />
</span>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jqueryzoom.js"></script>
<script type="text/javascript">
$(function(){
$(".jqzoom").jqueryzoom({
xzoom:300,
yzoom:300,
offset:0,
position:"right",
magnify:4,
lens:1
});
});
document.getElementById('bigfrom').onmousemove=function(e){
console.log(1);
};
</script>
</html>
其中需要的三个js文件可以在网上自行搜索下载：
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jqueryzoom.js"></script>
效果如图：
