js放大镜放大购物图片效果
图片放大镜效果，供大家参考，具体内容如下
一难点：不让黄盒子出界
二难点：让大盒子相应移动（比例）
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>我的放大镜</title>
<style>
*{
margin:0;
padding:0;
}
.box{
margin:100px;
position:relative;
}
.small{
width:350px;
height:350px;
border:1pxsolid#999;
position:relative;
}
.select{
display:none;
width:100px;
height:100px;
background:rgba(255,255,0,0.4);
position:absolute;
left:0;
top:0;
cursor:move;
}
.big{
display:none;
position:absolute;
left:360px;
top:0;
width:450px;
height:450px;
border:1pxsolid#ccc;
overflow:hidden;
}
.bigimg{
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<divclass="box">
<divclass="small"id="smallbox">
<imgsrc="images/001.jpg"alt="">
<divclass="select"id="mask"style="display:none;"></div>
</div>
<divclass="big"id="bigbox">
<imgsrc="images/0001.jpg"alt="">
</div>
</div>
<script>
varsmallbox=document.getElementById('smallbox');
varbigbox=document.getElementById('bigbox');
varmask=document.getElementById('mask');
varbigImg=bigbox.children[0];
smallbox.onmouseover=function(){
mask.style.display="block";
bigbox.style.display="block";
}
smallbox.onmouseout=function(){
mask.style.display="none";
bigbox.style.display="none";
}
smallbox.onmousemove=function(event){
varevent=event||window.event;
varx=event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2;
vary=event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
//不让黄盒子出界
if(x<0){
x=0;
}elseif(x>smallbox.offsetWidth-mask.offsetWidth){
x=smallbox.offsetWidth-mask.offsetWidth;
}
if(y<0){
y=0;
}elseif(y>smallbox.offsetHeight-mask.offsetHeight){
y=smallbox.offsetHeight-mask.offsetHeight;
}
mask.style.left=x+"px";
mask.style.top=y+"px";
bigImg.style.left=-x/smallbox.offsetWidth*bigbox.offsetWidth+"px";//注意是-x
bigImg.style.top=-y/smallbox.offsetHeight*bigbox.offsetHeight+"px";
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。