放大镜效果

第一次写博客，JS菜鸟，努力学习中。自己写了一段放大镜特效效果，望前辈多多指点。
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>JS放大镜练习</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <link href="" rel="stylesheet">
10 <style tyle="text/css">
11 #demo{width: 400px;height: 255px;border: 1px solid #ccc;position: relative;margin:50px;}
12 #smallbox{position: absolute;z-index: 1;}
13 #floatbox{width:160px;height: 120px;position: absolute;z-index: 1;background:#fff;filter:alpha(opacity=50);opacity: 0.5;cursor: move;display: none;}
14 #bigbox{width: 400px;height: 300px;border: 1px solid #ccc;position: absolute;top:0;left:480px;overflow: hidden;display: none;}
15 #bigbox img{position: absolute;z-index: 5;}
16 #mark{position: absolute;display: block;width: 400px;height: 255px;z-index: 10;cursor: move;background: #fff;filter:alpha(opacity=0);opacity:0;}
17 </style>
18 </head>
19 <body>
20 <div id="demo">
21 <div id="mark"></div>
22 <div id="smallbox">
23 <div id="floatbox"></div>
24 <img src="http://www.codefans.net/jscss/demoimg/201102/11_2_2.jpg" alt="" width='400' height='255'>
25 </div>
26 <div id="bigbox">
27 <img src="http://www.codefans.net/jscss/demoimg/201102/11_2_2.jpg" alt="">
28 </div>
29 </div>
30 <script type="text/javascript">
31 var objDemo = document.getElementById("demo");
32 var objMark = document.getElementById("mark");
33 var objSmall = document.getElementById("smallbox");
34 var objFloat = document.getElementById("floatbox");
35 var objBig = document.getElementById("bigbox");
36 var bigImg = objBig.getElementsByTagName("img")[0];
37 objMark.onmouseover=function(){
38 objFloat.style.display = "block";
39 objBig.style.display = "block";
40 }
41 objMark.onmouseout=function(){
42 objFloat.style.display = "none";
43 objBig.style.display = "none";
44 }
45 objMark.onmousemove=function(ev){
46 var _event = ev || window.event;
47 var left= _event.clientX-objDemo.offsetLeft-objSmall.offsetLeft-objFloat.offsetWidth/2;
48 var top= _event.clientY-objDemo.offsetTop-objSmall.offsetTop-objFloat.offsetHeight/2;
49 if (left<0) {
50 left = 0;
51 } else if(left>(objSmall.offsetWidth-objFloat.offsetWidth)){
52 left=objSmall.offsetWidth-objFloat.offsetWidth;
53 }
54 if (top<0) {
55 top = 0;
56 } else if(top>(objSmall.offsetHeight-objFloat.offsetHeight)){
57 top=objSmall.offsetHeight-objFloat.offsetHeight;
58 }
59 objFloat.style.left = left + "px";
60 objFloat.style.top = top + "px";
61 
62 //大图移动 (不是特别懂)
63 var parentX = left / (objSmall.offsetWidth - objFloat.offsetWidth);
64 var parentY = top / (objSmall.offsetHeight - objFloat.offsetHeight);
65 bigImg.style.left = - parentX * (bigImg.offsetWidth - objBig.offsetWidth) + "px";
66 bigImg.style.top = - parentY * (bigImg.offsetHeight - objBig.offsetHeight) + "px";
67 }
68 </script>
69 </body>
70 </html>