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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！