一、详细介绍

（1）放大镜的基本要领如下：

（2）放大镜原理解析图：

1.

2.

3.图片：

二、代码

1.css代码下：

<style>.little{width: 640px;height: 400px;border: 1px solid black;position: relative;}/* 小图 */.little img{width: 640px;height: 400px;}/* 小放大镜 */.little .mark{width: 320px;height: 200px;background-color: yellow;opacity: 0.5;position: absolute;left: 0;top: 0;/* 默认隐藏 */display: none;}/* 大放大镜 */.great{width: 960px;height: 600px;border: 1px solid red;overflow: hidden;position: relative;/* 默认隐藏 */display: none;}.great img{position: absolute;left: 0;top: 0;}</style>

2.html如下：

<div class="wrapper"><!-- 小图:640*400,缩小3倍 --><div class="little"><img src="./img/xhr.jpg" alt=""><!-- 放大镜：320*200 --><div class="mark"></div></div><!-- 大放大镜 --><div class="great"><!-- 大图:1920*1200 --><img src="./img/xhr.jpg" alt=""></div></div>

3.JavaScript代码如下：

<script>var _litte=document.querySelector(".little"); //小图框var _mark=document.querySelector(".mark"); //小放大镜var _great=document.querySelector(".great"); //大放大镜var _img=document.querySelector(".great img"); //大图_litte.onmouseover=function(){_great.style.display="block";_mark.style.display="block";}_litte.onmouseout=function(){_great.style.display="none";_mark.style.display="none";}_litte.onmousemove=function(event){//计算小放大镜的x，yvar dx=event.clientX-_litte.offsetLeft-_mark.offsetWidth/2;var dy=event.clientY-_litte.offsetTop-_mark.offsetHeight/2;//到左边if(dx<=0){dx=0;}// 到最右边if(dx>=_litte.offsetWidth-_mark.offsetWidth){dx=_litte.offsetWidth-_mark.offsetWidth;}_mark.style.left=dx+"px";//到上边if(dy<=0){dy=0;}//到下边if(dy>=_litte.offsetHeight-_mark.offsetHeight){dy=_litte.offsetHeight-_mark.offsetHeight;}_mark.style.top=dy+"px";_img.style.left=-3*dx+"px";_img.style.top=-3*dy+"px";}</script><script>var _litte=document.querySelector(".little"); //小图框var _mark=document.querySelector(".mark"); //小放大镜var _great=document.querySelector(".great"); //大放大镜var _img=document.querySelector(".great img"); //大图_litte.onmouseover=function(){_great.style.display="block";_mark.style.display="block";}_litte.onmouseout=function(){_great.style.display="none";_mark.style.display="none";}_litte.onmousemove=function(event){//计算小放大镜的x，yvar dx=event.clientX-_litte.offsetLeft-_mark.offsetWidth/2;var dy=event.clientY-_litte.offsetTop-_mark.offsetHeight/2;//到左边if(dx<=0){dx=0;}// 到最右边if(dx>=_litte.offsetWidth-_mark.offsetWidth){dx=_litte.offsetWidth-_mark.offsetWidth;}_mark.style.left=dx+"px";//到上边if(dy<=0){dy=0;}//到下边if(dy>=_litte.offsetHeight-_mark.offsetHeight){dy=_litte.offsetHeight-_mark.offsetHeight;}_mark.style.top=dy+"px";_img.style.left=-3*dx+"px";_img.style.top=-3*dy+"px";}</script>

如果感觉简单易懂，并给你的学习带来了帮助，请点赞+关注！

谢谢支持！！！！！！！！！！！！！！！！！！