前端必学——实现电商图片放大镜效果（附代码）
放大镜可以说是前端人必须学会的程序之一,今天的案例为大家展示一下怎么实现放大镜的效果！
效果图展示
整个效果就是当鼠标放到展示图上的时候，会出现一个遮罩层以及弹出来一个框展示一个详情图，并且鼠标移动的时候详情图跟着移动，鼠标离开详情图消失。
HTML 代码：
<html>
<head>
<style>
#small{
width: 500px;
height: 312px;
position: absolute;
left: 20px;
top: 20px;
}
#pic1{
position: absolute;
left: 0px;
top: 0px;
}
#pic1 img{
width: 100%;
height: 100%;
}
#big{
width: 200px;
height: 200px;
position: absolute;
left: 550px;
top: 50px;
border: 1px solid blue;
overflow: hidden;
}
#pic2{
width: 1000px;
height: 625px;
position: absolute;
left: 0;
top: 0;
}
#pic2 img{
width: 100%;
height: 100%;
}
#mask{
width: 100px;
height: 100px;
background: black;
opacity: 0.3;/*让遮罩层看起来透明*/
filter: alpha(opacity = 30);/*兼容不同的浏览器*/
position: absolute;
display: none;
}
</style>
<script>
window.onload = function(){//文档内容加载完之后再执行
//当鼠标移入小图片，显示遮罩层和放大的区域
$('small').onmouseenter = function(){
$('mask').style.display = 'block';
$('big').style.display='block';
}
//鼠标移出时，隐藏遮罩层和放大的区域
$('small').onmouseleave = function(){
$('mask').style.display='none';
$('big').style.display="none";
}
//鼠标移动
$('small').onmousemove = function(ev){
var e = ev || window.event;
//计算鼠标的位置，并让鼠标显示在遮罩层的中间
var l = e.clientX - $('small').offsetLeft - 50;
var t = e.clientY - $('small').offsetTop -50;
//别让遮罩层移出图片
if(l <= 0){
l = 0;
}
if(l >= 500 - 100){
l = 400;
}
if(t <= 0){
t = 0;
}
if(t >= 312 - 100){
t = 212;
}
//遮罩层的移动
$('mask').style.left = l + 'px';
$('mask').style.top = t + 'px';
//通过遮罩层移动，来计算出放大后图片的显示区域
$("pic2").style.left = -$("mask").offsetLeft * 2 + 'px';
$("pic2").style.top = -$("mask").offsetTop * 2 + 'px';
}
}
//为了更容容易的获取 id
function $(id){
return document.getElementById(id);
}
</script>
</head>
<div id="small">
<div id="pic1">
<img src="mm.jpg" alt="">
</div>
<div id="mask"></div>
</div>
<div id="big">
<div id="pic2">
<img src="mm.jpg" alt="">
</div>
</div>
</html>
互联网深耕7、8年，分享工作经验和技术 2023-06-25 加入
hello，我是小齐很开心跟大家一起分享计算机技术和经验
评论