基本结构
<div class="box" id="box">
<div class="small">
<img src="small.jpg" width="350">
<div class="mask"></div>
</div>
<div class="big">
<img src="big.jpg" width="800">
</div>
</div>
基本样式
*{padding:0;margin:0;}
.box{
width: 350px;
height: 350px;
margin:100px;
border:1px solid #ccc;
position: relative;
}
.big{
width: 400px;
height: 400px;
position: absolute;
top:0;
left:360px;
border:1px solid #ccc;
overflow: hidden;
display: none;
}
.big img{
position: absolute;
}
.mask{
width: 175px;
height: 175px;
background: rgba(255,255,0,.4);
position: absolute;
top:0px;
left:0px;
cursor: move;
display: none;
}
.small{
position: relative;
}
我们大概过程分为三步
1.鼠标经过时显示mask和big,当鼠标离开box的时候隐藏mask和big
2.当鼠标在盒子中移动时,让mask跟着鼠标一起移动
3.当mask移动时让大图跟着移动 **鼠标经过时显示mask和big,当鼠标离开box的时候隐藏mask和big **
var box = document.getElementById('box');
var small = document.querySelector('.small');
var big = document.querySelector('.big');
var mask = document.querySelector('.mask');
var smallImg = small.children[0];
var bigImg = big.children[0];
//.鼠标经过时显示mask和big,当鼠标离开box的时候隐藏mask和big
box.onmouseenter=function(){
mask.style.display = 'block';
big.style.display = 'block';
}
box.onmouseleave=function(){
mask.style.display = 'none';
big.style.display = 'none';
}
当鼠标在盒子中移动时,让mask跟着鼠标一起移动
...
//2.当鼠标在盒子中移动时,让mask跟着鼠标一起移动
box.onmousemove=function(e){
//1. 获取鼠标在盒子的位置 就是mask的坐标
//鼠标在页面的位置减去盒子在页面的位置
var maskX = e.pageX-box.offsetLeft;
var maskY = e.pageY-box.offsetTop;
//2. 让鼠标出现在mask的中心点
maskX = maskX -mask.offsetWidth/2;
maskY = maskY -mask.offsetHeight/2;
//3. 限制mask的移动范围
maskX = maskX<0?0:maskX;
maskY = maskY<0?0:maskY;
//如果maskX超过了最大值,使当前移动的位置就等于最大值
maskX = maskX > box.offsetWidth-mask.offsetWidth?box.offsetWidth-mask.offsetWidth:maskX
maskY= maskY > box.offsetHeight-mask.offsetHeight?box.offsetHeight-mask.offsetHeight:maskY
//3. mask移动
mask.style.left = maskX+'px';
mask.style.top = maskY+'px';
}
当mask移动时让大图跟着移动
...
//3. mask移动
mask.style.left = maskX+'px';
mask.style.top = maskY+'px';
//大图移动位置:
//mask移动的距离/mask最大移动的距离=大图片移动的距离/大图片移动的最大距离
//大图片移动的最大距离=大图片的宽度减去big盒子宽度
//mask移动的最大距离
var maskMax = box.offsetWidth - mask.offsetWidth;
//大图片移动的最大距离
var bigImgMax = bigImg.offsetWidth - big.offsetWidth
//大图片移动的距离
var bigImgX = maskX * bigImgMax / maskMax;
var bigImgY = maskY * bigImgMax / maskMax
//使图片往前走
bigImg.style.left = -bigImgX+
'px';
bigImg.style.top = -bigImgY+'px'
到次完成放大镜的制作,这里主要是利用mask与大图移动的比值 mask移动的距离/mask最大移动的距离=大图片移动的距离/大图片移动的最大距离