js放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 400px;
height: 400px;
border: 1px solid #dddddd;
position: relative;
margin: 50px;
}
#small_box{
width: 400px;
height: 400px;
position: relative;
}
#mask{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background: url(img/mask.png) repeat;
display: none;
}
#big_box{
position: absolute;
top: 0;
left: 420px;
overflow: hidden;
width: 400px;
height: 400px;
border: 1px solid #DDDDDD;
display: none;
}
#big_box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="img/small.jpg">
<span id="mask">
</span>
</div>
<div id="big_box">
<img src="img/big.jpg" />
</div>
</div>
<script>
//1、获取需要标签
var box=document.getElementById("box");
var small_box=box.children[0];
var big_box=box.children[1];
var small_img=small_box.children[0];
var mask=small_box.children[1];
var big_img=big_box.children[0];
//2、监听鼠标移入
small_box.οnmοuseοver=function(){
//2.1 让大盒子和遮罩层显示
mask.style.display='block';
big_box.style.display='block';
//2.2监听鼠标移动
small_box.οnmοusemοve=function(e){
e=e || window.event;
//2.3求出小盒子移动的水平和垂直距离
var moveX=e.clientX-small_box.offsetLeft-box.offsetLeft-mask.offsetWidth*0.5;
var moveY=e.clientY-small_box.offsetTop-box.offsetTop-mask.offsetHeight*0.5;
//2.4边界处理
if(moveX < 0){
moveX=0
}else if(moveX >= small_box.offsetWidth-mask.offsetWidth ){
moveX=small_box.offsetWidth-mask.offsetWidth
}
if(moveY < 0){
moveY=0
}else if(moveY >= small_box.offsetHeight-mask.offsetHeight ){
moveY=small_box.offsetHeight-mask.offsetHeight
}
//2.5让小盒子移动起来
mask.style.left=moveX + 'px';
mask.style.top=moveY + 'px';
//2.6让大图动起来
//公式：movex /大图移动的距离？？？ = （small_box宽度-mask宽度）/ (big_img宽度-big_box宽度)
var x=moveX / (small_box.offsetWidth - mask.offsetWidth);
// var y=moveY / (big_img.offsetWidth - big_box.offsetWidth);
var y=moveY / (small_box.offsetHeight - mask.offsetHeight);
big_img.style.left = -x * (big_img.offsetWidth - big_box.offsetWidth) + 'px';
big_img.style.top = -y * (big_img.offsetHeight - big_box.offsetHeight) + 'px';
}
}
small_box.οnmοuseοut=function(){
mask.style.display='none';
big_box.style.display='none';
}
</script>
</body>
</html>