基于JavaScript实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验，有的网站会有一个商品放大镜功能，就是把鼠标移到图片上的时候，旁边会有另外一张大的图片展示，等同于放大镜效果，那这样的效果怎样实现的呢，我把代码发给大家，请大家参考。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>放大镜</title>
<style>
*{margin:0;padding:0;}
#warp{width:1184px;height:500px;margin:50pxauto0;background-color:#ccc;overflow:hidden;padding:10px;position:relative;}
#warp#minbox{width:350px;height:350px;float:left;position:relative;}
#maxbox{width:400px;height:400px;position:absolute;left:380px;overflow:hidden;display:none;}
#maxboximg{width:800px;height:800px;position:absolute;}
#con{float:left;margin-left:20px;}
#meng{width:175px;height:175px;position:absolute;background-color:yellow;opacity:0.4;filter:alpha(opacity=40);left:0;top:0;display:none;}
</style>
</head>
<body>
<divid="warp">
<divid="minbox">
<imgsrc="images/min.jpg"alt="">
<pid="meng"></p>
</div>
<divid="maxbox">
<imgsrc="images/max.jpg"alt="">
</div>
<divid="con">
<imgsrc="images/msg.png"alt="">
</div>
</div>
<script>
varminbox=document.getElementById('minbox');
varmeng=document.getElementById('meng');
varmaxbox=document.getElementById('maxbox');
varmaximg=maxbox.getElementsByTagName('img')[0];
varminimg=minbox.getElementsByTagName('img')[0];
functionoffsetTL(obj){
varofL=0,ofT=0;
while(obj){
ofL+=obj.offsetLeft+obj.clientLeft;
ofT+=obj.offsetTop+obj.clientTop;
obj=obj.offsetParent;
}
return{left:ofL,top:ofT};
}
minbox.onmousemove=function(e){
vare=e||window.event;
meng.style.display='block';
maxbox.style.display='block';
varniubi1=e.clientX-offsetTL(minbox).left-meng.clientWidth/2;//蒙板的X坐标
varniubi2=e.clientY-offsetTL(minbox).top-meng.clientHeight/2;//蒙板的Y坐标
varbili=maximg.clientWidth/minimg.clientWidth;
if(niubi1<=0){
niubi1=0;
}elseif(niubi1>=minbox.clientWidth-meng.clientWidth){
niubi1=minbox.clientWidth-meng.clientWidth;
}
if(niubi2<=0){
niubi2=0;
}elseif(niubi2>=minbox.clientHeight-meng.clientHeight){
niubi2=minbox.clientHeight-meng.clientHeight;
}
console.log(niubi1);
console.log(niubi2);
meng.style.left=niubi1+'px';
meng.style.top=niubi2+'px';
maximg.style.left=-parseInt(meng.style.left)*bili+'px';
maximg.style.top=-parseInt(meng.style.top)*bili+'px';
}
minbox.onmouseout=function(){
meng.style.display='none';
maxbox.style.display='none';
}
</script>
</body>
</html>
以上所述是小编给大家介绍的基于JavaScript实现购物网站商品放大镜效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！