在淘宝上购物时，总会看到类似放大镜的效果。以下为原生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>
效果图（上图）
本文转自挨踢前端博客园博客，原文链接http://www.cnblogs.com/duanhuajian/archive/2012/08/21/2650053.html如需转载请自行联系原作者
@挨踢前端