浏览商品放大镜特效

<!DOCTYPE html >
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{margin:0px;padding:0px;}
       #small{400px;height:300px;border:1px green solid;}
       #move{100px;height:100px;position:absolute;backgrouond:gray;
       left:0px;top:0px;border:1px green solid;}
       #big{400px;height:400px;position:absolute;left:500px;
       top:0px;overflow:hidden;}
   </style>
</head>
<body>
   <div id="small"><img src="./images/1 (3).jpg" alt="" width="400px"><div id="move" style="display:none;"></div></div>
   <div id="big" style="display:none;">
       <img src="./images/1 (3).jpg" alt="" >
   </div>
</body>
<script>
   //找对象
   var small = document.getElementById('small');
   var big = document.getElementById('big');
   var move = document.getElementById('move');
   //鼠标移入小图事件
   small.onmousemove = function(e) {
       var e = e || event;
       //让对应的大图和移动move的div显示
       big.style.display = 'block';
       move.style.display = "block";
       //获取鼠标在小图的坐标
       document.title = "X:"+e.clientX+"Y:" +e.clientY;
       //将鼠标的坐标赋值于move这个移动div
       move.style.left= e.clientX -50+'px';
       move.style.top = e.clientY - 50+'px';
       //将大图的滚动条调整到鼠标的4倍
       big.scrollLeft = e.clientX * 4 -200 ;
       big.scrollTop = e.clientY * 4 -190;
       if(parseInt(move.style.left) <= 0) {
           move.style.left = 0+'px';
       }
       if(parseInt(move.style.left) >= 300){
           move.style.left = 300+'px';
       }
       if(parseInt(move.style.top) <= 0) {
           move.style.top = 0 +'px';
       }
       if(parseInt(move.style.top) >= 200){
           move.style.top = 200+'px';
       }



   }

//鼠标移出事件
   small.onmouseleave = function () {
       //鼠标移出大图消失
       big.style.display = 'none';
       move.style.display = "none";
       }

</script>
</html>