需求： 用户鼠标移入出现遮罩层（即放大镜），同时右侧显现放大同样位置的图片js实现图片放大镜效果，鼠标移出,遮罩层和放大的图片隐藏不见，鼠标移动，遮罩层移动，显示大图的位置也移动。遮罩层的移动范围只限于图片的容器内部。 步骤如下： 1：首先分析布局
实现放大镜功能要先有原图片和放大后的图片，先设置一个div大盒子,大盒子里面设置两个盒子，左边盒子的背景设置为需要放大的图片，右边的盒子放入放大后的图片，左边盒子里面放入一个小的遮罩层js实现图片放大镜效果，并设置为绝对定位，便于后续移动
布局如下
![js实现图片放大镜效果_js 图片缓慢放大效果_jquery实现图片放大预览效果][1] 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;
}
2：分析js功能实现
首先创建相应的节点对象
var smallImgObj=document.getElementById('smallImg');
var smallDivObj=document.getElementById('smallDiv');
其中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;
遮罩层的实际移动距离
x=sx-smallDivObj.offsetWidth/2;
在这里要对遮罩层的位置做一下判断，如果遮罩层top,left的值超过200,0时，就需要特殊操作，也就是说设置条件不让遮罩层移入到小div外面
if(x>=200) x=200;if(x=200) y=200;
if(y结论：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=200) y=200;
if(y
!
发表评论