一个简单的JavaScript放大镜

最新推荐文章于 2025-05-22 14:38:07 发布

转载最新推荐文章于 2025-05-22 14:38:07 发布 · 348 阅读

本文介绍了一种使用HTML、CSS和JavaScript实现的图片放大镜效果。通过鼠标在小图上移动，可以预览大图中对应位置的细节，适用于产品展示等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta 
charset="UTF-8">
<title></title>
<styletype="text/css">
* {
margin: 0;
padding: 0;
}
img {
vertical-align: 
top;
}
.fdj {
width: 350px;
height: 350px;
position: relative;
margin: 0pxauto;
border: 1pxsolidgainsboro;
}
.small {
position: relative;
}
.small img {
width: 350px;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255,255,0,
0.4);
position: absolute;
left: 0;
top: 0;
cursor: move;
display: none;
}
.big {
position: absolute;
top: 0;
left: -500px;
width: 500px;
height: 500px;
border: 1pxsolidgainsboro;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>

<a>文章来源于网络 如有侵权请联系删除 </a>
<body>
<div 
class="fdj">
<div 
class="small">
<img 
src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
<div 
class="mask"></div>
</div>
<div 
class="big">
<img 
src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
</div>
</div>
</body>
<scripttype="text/javascript">
var fdj =document.querySelector('.fdj')// 获得最大的盒子
var small =document.querySelector('.small');//获取小图片盒子
var big =document.querySelector('.big');//获取大图片盒子
var bigs =big.children[0]//大图片
var smalls =small.children[0]//小图片
var mask =small.children[1];//遮罩

//鼠标移入小图片盒子
small.onmouseover =function() {
//鼠标移入图片盒子将遮罩与大图片显示
mask.style.display ='block';
big.style.display =' block';
};

//鼠标移出小图片盒子
small.onmouseout =function() {
//鼠标移出小图片盒子将遮罩与大图片隐藏
mask.style.display ='none';
big.style.display ='none';
};

var x =0;
var y =0;
//鼠标在小图片上移动时
small.onmousemove =function(ev) {
var ev =event ||window.event;
//让鼠标在遮罩正中
//鼠标X坐标与Y坐标
x = ev.clientX -this.offsetParent.offsetLeft
 -mask.offsetWidth /2;
y = ev.clientY -this.offsetParent.offsetTop
 -mask.offsetHeight /2;
//将遮罩限制在小图片盒子中

if (x <0) {
x = 0;
} else if (x >small.offsetWidth -mask.offsetWidth)
 {
x = small.offsetWidth -mask.offsetWidth;
}

if (y <0) {
y = 0;
} else if (y >small.offsetHeight -mask.offsetHeight)
 {
y = small.offsetHeight -mask.offsetHeight
}
mask.style.left =x +'px';
mask.style.top =y +'px';

//大图与小图的比例

/*var scalX = bigs.offsetWidth/small.offsetWidth;
var scalY = bigs.offsetHeight/small.offsetHeight;*/

var scalX =x / (small.offsetWidth -mask.offsetWidth);
var scalY =y / (small.offsetHeight -mask.offsetHeight);

bigs.style.left = -(x *scalX) +'px';
bigs.style.top = -(y *scalY) +'px';

};
</script>




</html>