需求:
- 用户鼠标移入出现遮罩层(即放大镜),
- 同时右侧显现放大同样位置的图片,
- 鼠标移出,遮罩层和放大的图片隐藏不见,
- 鼠标移动,遮罩层移动,显示大图的位置也移动。
- 遮罩层的移动范围只限于图片的容器内部。
步骤如下:
1:首先分析布局
实现放大镜功能要先有原图片和放大后的图片,先设置一个div大盒子,大盒子里面设置两个盒子,左边盒子的背景设置为需要放大的图片,右边的盒子放入放大后的图片,左边盒子里面放入一个小的遮罩层,并设置为绝对定位,便于后续移动
布局如下
<div class="fang">
<div id="smallImg">
<div id="smallDiv"></div>
</div>
<div id="bigDiv">
<img src="OIp-C.jpg" alt="" id="bigImg">
</div>
</div>
style样式如下
<style>
*{
margin: 0px;padding: 0px;
}
.fang{
}
#smallImg{
width: 300px;
height: 300px;
background: url(OIp-C.jpg) 0px 0px/cover;
}
#bigDiv{
width: 400px;
height: 400px;
position: absolute;
left: 300px;
top: 0px;
overflow: hidden;
display: none;
/* background-color: red; */
}
#bigImg{
width: 1200px;
height: 1200px;
position: absolute;
}
#smallDiv{
width: 100px;
height: 100px;
background-color: rgba(255,150, 0, 0.5);
position: absolute;
display: none;
}
</style>
2:分析js功能实现
首先创建相应的节点对象
var smallImgObj=document.getElementById('smallImg');
var smallDivObj=document.getElementById('smallDiv');
var bigDivObj=document.getElementById('bigDiv');
其中smallImgObj是需要放大图片的节点对象
smallDivObj是遮罩层节点对象
bigDivObj是右边div的节点对象
监听事件,当鼠标移入小图片时,小方块和大图像出现
smallImgObj.addEventListener('mouseover',function(){
smallDivObj.style.display='block';
bigDivObj.style.display='block';
})
鼠标移出时,遮罩层和右边div方块隐藏
smallImgObj.addEventListener('mouseout',function(){
smallDivObj.style.display='none';
bigDivObj.style.display='none';
})
鼠标移动时,使小方块也移动 小图移动方向和大图方向相反
核心:整个放大镜功难在在一个比列
小div/小图=大div/大图 100/300=400/1200
分析:尺寸大小->结论:3倍
监听事件,当鼠标移入到小div时,触发addEventListener事件
smallImg.addEventListener('mousemove',function(e){})
鼠标距元素内的左上距离
sx=e.clientX-smallImgObj.offsetLeft;
sy=e.clientY-smallImgObj.offsetTop;
// console.log(sx,sy);
遮罩层的实际移动距离
x=sx-smallDivObj.offsetWidth/2;
y=sy-smallDivObj.offsetHeight/2;
在这里要对遮罩层的位置做一下判断,如果遮罩层top,left的值超过200,0时,就需要特殊操作,也就是说设置条件不让遮罩层移入到小div外面
if(x>=200) x=200;
if(x<=0) x=0;
if(y>=200) y=200;
if(y<=0) y=0;
大图的移动距离是难点,也是核心,进过上面的分析后知道大图的移动距离是遮罩层移动的3倍且方向相反
var bigImg=document.getElementById('bigImg');
bigImg.style.left=-3*x+'px';
bigImg.style.top=-3*y+'px';
3:完整js代码如下
<script>
//获得各节点对象
var smallImgObj=document.getElementById('smallImg');
var smallDivObj=document.getElementById('smallDiv');
var bigDivObj=document.getElementById('bigDiv');
console.log(bigDivObj);
// console.log(smallImgObj,smallDivObj,bigImgObj);
//监听事件,当鼠标移入小图片时,小方块和大图像出现
smallImgObj.addEventListener('mouseover',function(){
smallDivObj.style.display='block';
bigDivObj.style.display='block';
})
//鼠标移出时,都消失
smallImgObj.addEventListener('mouseout',function(){
smallDivObj.style.display='none';
bigDivObj.style.display='none';
})
//鼠标移动时,使小方块也移动 小图移动方向和大图方向相反
//核心:整个放大镜功能醉在一个比列
//小div/小图=大div/大图
//分析:尺寸大小->结论:3倍
smallImg.addEventListener('mousemove',function(e){
var e = e || window.event;
// console.log(e);
//鼠标距元素内的左上距离
sx=e.clientX-smallImgObj.offsetLeft;
sy=e.clientY-smallImgObj.offsetTop;
// console.log(sx,sy);
//小方块的实际移动距离
x=sx-smallDivObj.offsetWidth/2;
y=sy-smallDivObj.offsetHeight/2;
if(x>=200) x=200;
if(x<=0) x=0;
if(y>=200) y=200;
if(y<=0) y=0;
smallDivObj.style.left=x+'px';
smallDivObj.style.top=y+'px';
// console.log(x,y);
//大图实际移动距离
var bigImg=document.getElementById('bigImg');
bigImg.style.left=-3*x+'px';
bigImg.style.top=-3*y+'px';
})
</script>