一、詳細介紹

（1）放大鏡的基本要領如下：

1、原圖寬高比例=縮略圖寬高比=放大鏡的寬高比 2、大放大鏡與小放大鏡的倍數=原圖與縮略圖的倍數

3、默認兩個放大鏡與圖片都是左上角重疊

4、原圖相對于小放大鏡反方向移動相應倍數的距離

（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>

如果感覺簡單易懂，并給你的學習帶來了幫助，請點贊+關注！

謝謝支持！！！！！！！！！！！！！！！！！！

總結

以上是生活随笔為你收集整理的图片放大镜详细教程（简单易懂、注释清晰明了）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。