放大镜效果

<!DOCTYPE html>
<html lang="ch">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   *{margin:0;padding:0;}
   #little{320px;height:180px;border:3px solid #000;margin:100px 0 0 100px;position: relative;}
   #little img{320px;height:180px;}
   .square{90px;height:90px;background:yellow;opacity:0.3;position: absolute;top:0;left:0;display:none;}
   #large{500px;height:500px;position: absolute;top:50px;left:600px;overflow: hidden;display:none}
   #large img{position: relative;top:0;right:0;}
   </style>
</head>
<body>
   <div id="little">

       <img src="index.jpg" alt=""><div class="square"></div>
   </div>
   <div id="large">
       <img src="index.jpg" alt="">
   </div>
   <script>
   var oLittle = document.getElementById("little");
   var oImg = document.getElementsByTagName("img")[0];
   var oSquare = oLittle.getElementsByTagName("div")[0];
   var oLarge = document.getElementById("large");
   var oImg2 = oLarge.getElementsByTagName("img")[0];


   //oSquare.style.display = "block";
   oLittle.onmouseenter = function(){
       oSquare.style.display = "block";
       oLarge.style.display = "block";
   }
   oLittle.onmouseleave = function(){
       oSquare.style.display = "none";
       oLarge.style.display = "none";
   }
   oLittle.onmousemove = function(ev){
       var ev = ev || event;
       var iX = ev.clientX;
       var iY = ev.clientY;
       var iT = oLittle.offsetTop;
       var bT = (oLittle.offsetHeight - oLittle.clientHeight)/2;
       var iL = oLittle.offsetLeft;
       var bL = (oLittle.offsetWidth - oLittle.clientWidth)/2;
       console.log(bL)
       var oL = iX - iL - bL - oSquare.offsetWidth/2;
       var oT = iY - iT - bT - oSquare.offsetHeight/2;
       if(oL<0)oL=0;
       if(oT<0)oT=0;
       if(oL>bL+oLittle.clientWidth-oSquare.offsetWidth)oL=bL+oLittle.clientWidth-oSquare.offsetWidth;
       if(oT>bT+oLittle.clientHeight-oSquare.offsetHeight)oT=bT+oLittle.clientHeight-oSquare.offsetHeight;
       //if(oL)
       oSquare.style.left = oL + "px";
       oSquare.style.top = oT + "px";
       var scaleX = oL/(oLittle.clientWidth-oSquare.offsetWidth);
       var scaleY = oT/(oLittle.clientHeight-oSquare.offsetHeight);
       oImg2.style.left = (oLarge.clientWidth-oImg2.offsetWidth) * scaleX + "px";
       oImg2.style.top = (oLarge.clientHeight-oImg2.offsetHeight) * scaleY + "px";
   }

   </script>
</body>
</html>