话不多说，直接上图
相信大家在浏览大多数网站，尤其是购物网站一定经常见到这种放大镜效果，接下来代码奉上
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"><script src="./jquery.js"></script></head>
<body><div class="thumbnail"> <!--外面红色div盒子--><img src="./1.jpg" alt=""><div class="magnifier"></div> <!--里面移动黑盒子--></div><div class="original"> <!--右边盛放大图的盒子--><img src="./1.jpg" alt=""></div><script src="./index.js"></script>
</body>
</html>
css代码：
*{margin: 0;padding: 0;
}
/*
thumbnail 缩略图
original 原图
magnifier 放大镜
*/
.thumbnail ,.original{width: 400px;height: 400px;border: 1px solid red; position: absolute;margin: 50px;
}.original{left: 450px;overflow: hidden;display: none;
}
.thumbnail >img{width: 400px;height: 400px;}.original >img{width: 800px;height: 800px;position: absolute;
}.magnifier{cursor: move;width: 200px;height: 200px;background: rgba(0, 0, 0, 0.5);position: absolute;top:0;left: 0;display: none;
}
JavaScript代码：
$(".thumbnail").mouseover(function(){$(".magnifier").show();$(".original") .show();
})$(".thumbnail").mousemove(function(ev){// 鼠标 相对 页面 x ,y坐标 var mx=ev.pageX;var my=ev.pageY;//鼠标 相对 thumbnail div 的 x,yvar tx = mx - $(".thumbnail").offset().leftvar ty = my - $(".thumbnail").offset().top// 鼠标 放在 放大镜 中间// 放大镜 left = 鼠标 相对div 的x -放大镜 div 宽度 /2 // 放大镜 top = 鼠标 相对div 的y -放大镜 div 高度 /2 // l == 放大镜 左上角 x 坐标// t == 放大镜 左上角 y 坐标var l= tx -$(".magnifier").width()/2 ;var t= ty -$(".magnifier").height()/2 ;// 放大镜 最大 x 坐标// 放大镜 最大 y 坐标var maxX= $(".thumbnail").width() - $(".magnifier").width();var maxY= $(".thumbnail").height() - $(".magnifier").height();//处理边界if(l > maxX){l = maxX}if(t >maxY){t=maxY}if(l<0){l=0}if(t<0){t=0}//放大镜位置$(".magnifier").css({left:l +"px",top: t +"px"})// 原图 位置$(".original >img").css({left:- l*2 +"px",top:-t*2 +"px"})})
// 鼠标离开 隐藏 放大镜 ，原图
$(".thumbnail").mouseout(function(){$(".magnifier").hide();$(".original") .hide();
})
END
My life is my own.
我的生活我做主。
