原理分析：當鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相應位置。（同時，當鼠標在小圖片上移動時，右側大圖片往相反的方向移動。）

放大鏡特效設計：

①頁面元素：小圖片，大圖片以及盛放圖片的容器

②事件捕獲：onmouseover(當鼠標指針移動到指定對象上時發生)、onmouseout(當鼠標指針移除指定對象時發生)、onmousemove（當鼠標指針移動時發生）

③技術難點：offsetLeft（相對于父元素的左位移）、offsetTop (相對于父元素的頂部位移)

? ? ? ? ? ? ? ? ? ? ?注：offsetLeft和style.left的區別：a. 后者返回字符串（10px），前者返回數值（10）；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? b. 后者是可讀寫的，前者是只讀的。所以要改變元素的位置要用style.left；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? c. style.left需要提前定義，否則取到的是空值；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? d. offestLeft只針對html中設置的值有效，在css中設置的無法識別。

? ? ? ? ? ? ? ? ? ? ? offsetWidth/offsetHeight 元素所展現出的寬高

? ? ? ? ? ? ? ? ? ? ? event.clientX/event.clientY 元素相對于頁面的橫縱坐標

?

制作放大鏡特效所需的計算

重點：如何讓小圖片上的放大鏡和大圖片同時移動。

公式：小img寬/大img寬 = 放大鏡寬/大圖片可視區域寬 = 小圖片左移/大圖片右移

其中，小img寬和大img寬已知，放大鏡寬和可視區域寬已知，通過鼠標左移可以求得大圖片右移，確定大圖片位置。

開發放大鏡特效：

小圖片左位移/(大img寬-小img寬) = ？/（可視區域寬 - 放大鏡寬）

?

兼容性問題：

因為在IE瀏覽器中，容易中放入圖片或者span等的時候，但是當鼠標移入圖片時，會被認為是已經移除了容器，而接下來緊接著又觸發了onmouseover事件，因此造成了放大鏡特效的反復閃爍。

解決： 在原有的圖片上覆蓋一層背景色透為0的隔離層，之后將所有綁定在原先圖片容器上的事件綁定到該隔離層。

轉載于:https://www.cnblogs.com/xiaoya625/p/9256352.html

總結

以上是生活随笔為你收集整理的js放大镜特效的全部內容，希望文章能夠幫你解決所遇到的問題。

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