網頁放大鏡功能重點

實現電商網站中商品詳情頁面里的放大鏡功能，需要考慮 以下幾點：

1. 頁面結構
2. 商品原圖和放大圖片的比例問題
3. 鼠標移動距離與放大圖片移動距離比例問題
4. 圖片列表與原圖的對應問題

先從第一點開始說起：

　　一般來說放大鏡的布局都是一個大盒子，左邊是原圖，右邊是放大的圖，如下：

<div class="container">
    <!-- 原圖部分 -->
    <div class="img">
      <img src="./images2/1.jpg" alt="">
      <!-- 焦點框 -->
      <div class="focus"></div>
    </div>
    <!-- 圖片列表 -->
    <div class="list">
      <div class="button-next"></div>
      <div class="button-prev"></div>
      <span class="active">
        <img src="./images2/1.small.jpg" alt="">
      </span>
      <span>
        <img src="./images2/2.small.jpg" alt="">
      </span>
    </div>
    <!-- 大圖部分 -->
    <div class="big-img">
      <img src="./images2/1.big.jpg" alt="">
    </div>
  </div>

頁面結構布局結束后，該考慮下一個問題，我該怎樣讓放大鏡功能實現呢？

看下圖：

 我們希望實現鼠標移到小圖的任意位置，大圖就會移動到該位置，并放大一定的比例，那么我們要做的首先是設置兩個圖的比例大小

focus(焦點框的大小)  /  小圖片的大小  =  大圖片盒子的大小  /  大圖片的大小

可以設置一個放大比例，scale = 0.6

 設置完了圖片的大小比例，我們還要思考下一個問題，怎樣實現小圖移動的距離等比例作用到大圖上面呢？

大圖片移動的距離  /  大圖片的大小  =  focus移動的距離  /  小圖片的大小(原圖的大小)

這里注意大圖移動的方向應該是和focus移動的方向相反

想不通可以去jd，tb看看

只需將left和top改變的數值設置為負數即可

好了到這里基本就已經結束了，至于那個商品列表與原圖的對應問題，可以使用  e.target  這一方式獲取到當前點擊的圖片，獲取到了標簽，就可以把原圖位置的img標簽的src屬性切換成當前的圖片，剩下的就是DOM操作了，相信你一定可以摸索出來的，加油！！