放大镜

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <style type="text/css">
   #xiao{
    430px;
    height:419px;
    /*border:red 1px solid;*/
    margin:100px 0 0 100px;
    position:relative;
   }
   #xiao img{
    100%;
    height:100%;
    /*垂直对齐中间*/
    vertical-align:middle;
   }
   #jing{
    86px;
    height:82px;
    background: #00FFFF;
    opacity:0.4;
    position:absolute;
    top:0;
    left:0;
    /*display: none;*/
   }
   #da{
    430px;
    height:419px;
    /*溢出:隐藏;*/
    overflow:hidden;
    margin:-419px 0 0 600px;
    position:relative;
    /*display: none;*/
   }
   #da img{
    2150px;
    height:2095px;
    position:absolute;
   }
  </style>
</head>
<body>
  <div id="xiao">
   
   
   <img src="../../../js/11.9/img/糖糖.jpg"/>
   <div id="jing"></div>
  </div>
  <div id="da">
   
   <img src="../../../js/11.9/img/糖糖.jpg"/ id="pic">
  </div>
</body>
</html>
<script type="text/javascript">
var jing=document.getElementById("jing");//放大镜
var pic=document.getElementById("pic");//放大的图片
var xiao=document.getElementById("xiao")//小的图片
jing.onmousedown=function(ev){
  var ev=ev||window.event;
  ev.cancelBubble=true;
  var that=this;
  var x=ev.clientX-this.offsetLeft;
  var y=ev.clientY-this.offsetTop;
  document.onmousemove=function(ev){
   var ev=ev||window.event;
   var l=ev.clientX-x;
   var ll=xiao.offsetWidth-that.offsetWidth;
   var t=ev.clientY-y;
   var tt=xiao.offsetHeight-that.offsetHeight;
   if(l<=0){
    l=0;
   }
   else if(l>=ll){
    l=ll;
   }
   if(t<=0){
    t=0;
   }
   else if(t>=tt){
    t=tt;
   }
   that.style.left=l+"px";
   that.style.top=t+"px";

   pic.style.left=-5*parseInt(that.style.left)+"px";
   pic.style.top=-5*parseInt(that.style.top)+"px";
  }
  document.onmouseup=function(){
   document.onmousemove=null;
   document.onmouseup=null;
  }
  return false;
}
</script>