原生js写的放大镜效果
在淘宝上购物时，总会看到类似放大镜的效果。以下为原生js写的一个放大镜效果，其中肯定有很多不足，请大牛们指正，谢啦！
我的大体思路是：时时监听鼠标的坐标，当鼠标移动时，透明层随着鼠标移动，大图片相对透明层的移动而移动。不废话了，看代码。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>放大镜</title> 6 <meta name="Keywords" content=""> 7 <meta name="Description" content=""> 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 id="outer">24 <img src="images/pobabyb.gif" alt="pobaby小图"/>25 <div id="inner"></div>26 </div>27 <div id="aa">28 <div 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>
TAG:
