在淘寶上購物時，總會看到類似放大鏡的效果。以下為原生js寫的一個放大鏡效果，其中肯定有很多不足，請大牛們指正，謝啦！
我的大體思路是：時時監聽鼠標的坐標，當鼠標移動時，透明層隨着鼠標移動，大圖片相對透明層的移動而移動。不廢話了，看代碼。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>放大鏡</title> 6 <meta name="Keywords" content=""> 7 <meta name="author" content="@my_programmer"> 8 <style type="text/css"> 9 /*重置{*/ 10 html{color:#000;background:#fff;} 11 body,div{padding:0;margin:0;} 12 img{border:none;} 13 /*}重置*/ 14 .outer{width:200px;height:150px;position:relative;margin:20px auto;} 15 .inner{width:80px;height:60px;background:#f55;position:absolute;opacity:0.5;filter:alpha(opacity=50);left:0;top:0;cursor:pointer;} 16 .aa{width:320px;height:240px;position:relative;border:1px red solid;margin:20px auto;overflow:hidden;} 17 .imgs{position:absolute;} 18 .outer img{width:200px;height:150px;} 19 </style> 20 </head> 21 <body> 22 <div> 23 <div class="outer" id="outer"> 24 <img src="images/pobabyb.gif" alt="pobaby小圖"/> 25 <div class="inner" id="inner"></div> 26 </div> 27 <div class="aa" id="aa"> 28 <div class="imgs" id="imgs" ><img src="images/pobabyb.gif" alt="pobaby大圖"/></div> 29 </div> 30 </div> 31 <script type="text/javascript"> 32 var outer=document.getElementById("outer"); 33 var inner=document.getElementById("inner"); 34 var aa=document.getElementById("aa"); 35 var imgs=document.getElementById("imgs"); 36 var x,y,n=false; 37 inner.onmousedown=test1;//如果把inner改為document,鼠標在窗口任意位置點擊，圖片都會跟隨 38 document.onmousemove=test2;//document如果改為outer,鼠標在outer內才起作用 39 document.onmouseup=test3; 40 function test1(event){//鼠標按下時方法 41 var event=event || window.event;//調試兼容,各個瀏覽器認識event有差別. 42 n=true;//當n=true（n的值可隨便設定）時，假定為鼠標按下的事件 43 x=event.clientX-inner.offsetLeft;//鼠標在透明層的相對橫坐標=鼠標坐標-方塊左邊距 44 y=event.clientY-inner.offsetTop;//鼠標在透明層的相對縱坐標=鼠標坐標-方塊上邊距 45 } 46 function test2(event){//鼠標移動時方法 47 var event=event || window.event; 48 if(n==true){ 49 ////////鼠標移動范圍 50 inner.style.left=event.clientX-x+"px"; 51 inner.style.top=event.clientY-y+"px"; 52 ////////圖片移動范圍 53 imgs.style.left=-4*parseInt(inner.style.left)+"px"; 54 imgs.style.top=-4*parseInt(inner.style.top)+"px"; 55 ////////////////////////////限定鼠標移動的范圍 56 if(parseInt(inner.style.left)<0){ 57 inner.style.left=0+"px"; 58 } 59 if(parseInt(inner.style.top)<0){ 60 inner.style.top=0+"px"; 61 } 62 if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth){ 63 inner.style.left=outer.clientWidth-inner.clientWidth+"px"; 64 } 65 if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight){ 66 inner.style.top=outer.clientHeight-inner.clientHeight+"px"; 67 } 68 //////////////////////////////限定圖片移動的范圍 69 if(parseInt(imgs.style.left)>0){ 70 imgs.style.left=0+"px"; 71 } 72 if(parseInt(imgs.style.top)>0){ 73 imgs.style.top=0+"px"; 74 } 75 if(parseInt(imgs.style.left)<-4*(outer.clientWidth-inner.clientWidth)){ 76 imgs.style.left=-4*parseInt(outer.clientWidth-inner.clientWidth)+"px"; 77 } 78 if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight)){ 79 imgs.style.top=-4*parseInt(outer.clientHeight-inner.clientHeight)+"px"; 80 } 81 } 82 } 83 function test3(){//鼠標松開時方法 84 n=false; 85 } 86 </script> 87 </body> 88 </html>
效果圖（上圖）