JavaScript实现放大镜功能

直接上代码了，相关解释说明见代码中的注释部分。
  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="utf-8">
  5     <title>magnifier</title>
  6     <style>
  7       *{
  8         margin: 0;
  9         padding: 0
 10       }
 11       #demo{
 12         display: block;
 13         width: 1000px;
 14         height: 600px;
 15         margin: 50px;
 16         position: relative;
 17         border: 1px solid #ccc;
 18       }
 19       #small-box{
 20         position: relative;
 21         float: left;
 22         width: 192px;
 23         height: 108px;
 24         z-index: 1;
 25       }
 26       #mark {
 27         position: absolute;
 28         display: block;
 29         width: 192px;
 30         height: 108px;
 31         z-index: 10;
 32         background: #fff;
 33         filter: alpha(opacity = 0);
 34         opacity: 0;
 35         cursor: move;
 36 
 37       }
 38       #float-box{
 39         display: none;
 40         width: 50px;
 41         height: 50px;
 42         position: absolute;
 43         background: #ffffcc;
 44         border: 1px solid #ccc;
 45         filter:alpha(opacity=50);
 46         opacity: 0.5;
 47         cursor: move;
 48       }
 49       #big-box{
 50         display: none;
 51         position: absolute;
 52         /* float: left;*/
 53         top: 0px;
 54         left: 300px;
 55         width: 500px;
 56         height: 500px;
 57         overflow: hidden;
 58         border: 1px solid #ccc;
 59         z-index: 5;
 60       }
 61       #big-box img{
 62         position: absolute;
 63         overflow: hidden;
 64         z-index: 5;
 65       }
 66     </style>
 67     <script>
 68       //页面加载完毕后执行
 69       //三个鼠标事件
 70       //onmouseover:鼠标指针移到制定对象上时发生
 71       //onmouseout:鼠标指针移出指定对象时发生
 72       //onmousemove:鼠标指针移动时发生
 73 
 74       //offsetLeft:子元素相对于父元素的左位移
 75       //offsetTop:子元素相对于父元素的上部位移
 76       //offsetWidth:元素展示出的宽度，不包含滚动条未展示出的内容
 77       //offsetHeight:元素展示出的高度，不包含滚动条未展示出的内容
 78       //event.clientX:鼠标的X轴坐标，相对于整个页面
 79       //event.clientY:鼠标的Y轴坐标，相对于整个页面
 80 
 81       //offsetLeft和style.left的区别
 82       //1.style.left返回的是字符串，如50px,offsetLeft返回的是数值如50；
 83       //2.style.left是可读写的，offsetLeft是只读的，所以要改变DIV的位置，只能修改style.left;
 84       //3.style.left的值需要事先定义，否则取值为空，而且要定义在html代码中，写在样式表中无法获取
 85 
 86       //比例计算
 87       //小图片比大图片的值等于放大镜（模糊层）比放大后图片展示区域的值，即示例中的big-box
 88       window.onload=function () {
 89         var objDemo=document.getElementById("demo");
 90         var objSmallBox=document.getElementById("small-box");
 91         var objMark=document.getElementById("mark");
 92         var objFloatBox=document.getElementById("float-box");
 93         var objBigBox=document.getElementById("big-box");
 94         var objBigBoxImage=objBigBox.getElementsByTagName("img")[0];
 95         objMark.onmouseover=function(){
 96           objFloatBox.style.display = "block";
 97           objBigBox.style.display = "block";
 98         }
 99         objMark.onmouseout=function () {
100           objFloatBox.style.display = "none";
101           objBigBox.style.display = "none";
102       }
103       objMark.onmousemove=function(ev){
104         var _event=ev;
105         var left=_event.clientX -  objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
106         var top=_event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
107         /*alert(left);
108         alert(top);*/
109         if (left < 0) {
110           left = 0;
111         }else if(left > (objSmallBox.offsetWidth - objFloatBox.offsetWidth)) {
112           left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
113         }
114         if(top < 0){
115           top = 0;
116         }else if(top > (objSmallBox.offsetHeight - objFloatBox.offsetHeight)){
117           top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;
118         }
119         objFloatBox.style.left = left + "px";
120         objFloatBox.style.top = top + "px";
121 
122         var percentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
123         var percentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);
124 
125         objBigBoxImage.style.left = - percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
126         objBigBoxImage.style.top = - percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
127 
128       }
129       }
130     </script>
131   </head>
132   <body>
133     <div id="demo">
134       <div id="small-box">
135         <div id="mark"></div>
136         <div id="float-box"></div>
137         <img src="./images/guilin.jpg" style="192px;height:108px" />
138       </div>
139       <div id="big-box">
140         <img src="./images/guilin.jpg" />
141       </div>
142     </div>
143   </body>
144 </html>
效果如图所示：