Javascript 实现放大镜效果实例详解
Javascript实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构!
<divid="pic_wrap"> <divid="float_box"></div> <imgsrc="1.jpg"> </div> <divid="show"> <imgsrc="1.jpg"id="big_img"> </div>
最外层的两个div,分别是商品原始图片区域,和放大后的可视区域!id为float_box的区域为放大镜所示的区域!第一个img为商品图片,第二个img为预留的放大后的商品!图片CSS代码如下!
img{ width:250px; height:150px; } #pic_wrap{ position:relative; width:250px; height:150px; } #float_box{ width:100px; height:100px; background-color:green; filter:opacity(alpha:30); opacity:0.3; position:absolute; display:none; } #big_img{ background-image:url(1.jpg); height:450px; width:750px; background-repeat:no-repeat; background-size:cover; position:relative; } #show{ width:300px; height:300px; background-color:white; opacity:1; filter:opacity(alpha:1); overflow:hidden; display:none; }
HTML和CSS写好之后,就要利用js给放大镜加一些交互效果!
第一步,当鼠标移入的时候,放大镜能够显示出来!需要加onmouseover事件。
第二步,当鼠标没有移除,且鼠标在图片内不停地移动,需要加onmousemove事件。
第三步,当鼠标完全移除后,需要加onmouseout事件。
第四步,onmouseover事件需要让放大镜和可视窗口显示出来。
第五步,onmousemove事件,让放大镜和可视窗口中的图片同时移动。
第六步,onmouseout时间,让放大镜和可是窗口消失!
完整代码如下:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <styletype="text/css"> /*body{ margin:0; padding:0; }*/ img{ width:250px; height:150px; } #pic_wrap{ position:relative; width:250px; height:150px; } #float_box{ width:100px; height:100px; background-color:green; filter:opacity(alpha:30); opacity:0.3; position:absolute; display:none; } #big_img{ background-image:url(1.jpg); height:450px; width:750px; background-repeat:no-repeat; background-size:cover; position:relative; } #show{ width:300px; height:300px; background-color:white; opacity:1; filter:opacity(alpha:1); overflow:hidden; display:none; } </style> </head> <body> <divid="pic_wrap"> <divid="float_box"></div> <imgsrc="1.jpg"> </div> <divid="show"> <imgsrc="1.jpg"id="big_img"> </div> <scriptsrc="等比放大镜.js"></script> <scripttype="text/javascript"> varpic_wrap=document.getElementById('pic_wrap'), float_box=document.getElementById("float_box"), show=document.getElementById('show'); big_img=document.getElementById("big_img"); //鼠标移入事件,让放大镜和放大区显示! pic_wrap.onmouseover=function(){ float_box.style.display="block"; show.style.display="block"; } //鼠标不断移动时触发,实时更新放大镜得到的图片 pic_wrap.onmousemove=function(event){ floatMove(float_box,pic_wrap,event); showPic(); } //鼠标移出后,放大镜和放大区隐藏 pic_wrap.onmouseout=function(){ float_box.style.display="none"; show.style.display="none"; } //由于offset方法包括边框,在使用的时候很容易出现问题,所以用style来实时获取attr! functiongetStyle(obj,attr){ if(window.currentStyle){ returnparseInt(obj.currentStyle[attr]); } else{ returnparseInt(getComputedStyle(obj,null)[attr]); } } //运动框架,控制放大镜在原图中的位置! functionfloatMove(argu1,argu2,event){ vare=event||window.event; varminLeft=getStyle(argu1,"width"); varmaxLeft=getStyle(argu2,"width")-minLeft/2; varminHeight=getStyle(argu1,"height"); varmaxHeight=getStyle(argu2,"height")-minHeight/2; console.log(maxLeft); console.log(maxLeft-minLeft/2); if(e.clientX<minLeft/2){ float_box.style.left="0px";//防止放大镜超出左边框 } elseif(e.clientX>maxLeft){ float_box.style.left=getStyle(argu2,"width")-getStyle(argu1,"width")+"px";//防止放大镜超出右边框 } else{ float_box.style.left=event.clientX-minLeft/2+"px";//放大镜完全在图片内时正常移动 } if(e.clientY<minHeight/2){ float_box.style.top="0px";//防止放大镜超出上边框 } elseif(e.clientY>maxHeight){ float_box.style.top=getStyle(argu2,"height")-getStyle(argu1,"height")+"px";//防止放大镜超出下边框 } else{ float_box.style.top=event.clientY-minLeft/2+"px"; } } //用来显示放大镜得到的图片,利用坐标计算!实时更新可视区域 functionshowPic(){ variCurLeft=getStyle(float_box,"left"); variCurTop=getStyle(float_box,"top"); vara=getStyle(pic_wrap,"width")-getStyle(float_box,"width"); varb=getStyle(big_img,"width")-getStyle(show,"width"); varmoveWidth=-(iCurLeft/a)*b; big_img.style.left=moveWidth+"px"; varc=getStyle(pic_wrap,"height")-getStyle(float_box,"height"); vard=getStyle(big_img,"height")-getStyle(show,"height"); varmoveHigth=-(iCurTop/c)*d; big_img.style.top=moveHigth+"px"; } </script> </body> </html>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!