JQ實作一個放大鏡效果

當我們浏覽購物網站某個商品的詳情頁的時候，都會有一個滑鼠移入到商品上時放大的效果，那麼今天我們就用jq來實作一個放大鏡的效果，先上一個效果圖讓大家看一下（下圖是我仿照一加官網寫的一個商品詳情頁）：

1. 首先我們寫放大鏡要明白是怎樣的一個思路去實作這個效果；先分析，既然是放大鏡，那麼可以肯定的是要按照一個合适的比例去放大對應的相對的圖檔，同時放大鏡部分和被放大圖檔的移動距離都要等比例的放大，基本原理就這些了，然後下面我們再把細節完善一下。
2. 首先我們需要建立幾個變量用于設定圖檔的位置、移動距離等，在這我們就設定為全局變量了，因為後續用到的比較多；

$(function () {
            var mouseX = 0; //滑鼠移動的位置X
            var mouseY = 0; //滑鼠移動的位置Y
            var maxLeft = 0; //最右邊
            var maxTop = 0; //最下邊
            var markLeft = 0; //放大鏡移動的左部距離
            var markTop = 0; //放大鏡移動的頂部距離
            var perX = 0; //移動的X百分比
            var perY = 0; //移動的Y百分比
            var bigLeft = 0; //大圖要移動left的距離
            var bigTop = 0; //大圖要移動top的距離
           

1. 建立完成後我們要添加滑鼠移入移出事件（此時要注意移出要是用mouseleave，阻止冒泡，這是一個小細節），然後改變放大鏡的位置，同時要讓標明區域的小框隻能在原圖上移動；

function updataMark($mark) {
         //讓小框隻能在小圖中移動
         if (markLeft < 0){
             markLeft = 0;
          }else if (markLeft > markLeft){
              markLeft = markLeft;
          } 
            if (markTop < 0){
              markTop = 0;
          } else if (markTop > maxTop){
              markTop = maxTop;
       }
           

1. 還要在改變放大鏡位置步驟中設定相應的移動比例；

perX = markLeft / $(".good-img").outerWidth();
     perY = markTop / $(".good-img").outerHeight();
     bigLeft = -perX * $(".bigImg").outerWidth();
     bigTop = -perY * $(".bigImg").outerHeight();
     //小框的位置和屬性
    $mark.css({"left":markLeft, "top":markTop, "display":"block"});
    //改變完放大鏡位置後改變大圖的位置
    function updataBig() {
    $(".bigImg").css({"left":bigLeft, "top":bigTop, "display":"block"});
   }
           

1. 則是後我們可以添加滑鼠移入、移動、移出時的css效果了；

   注：滑鼠移動的位置（mouseX/Y）=滑鼠指針的位置-滑鼠指針的偏移量-小框寬高的1/2（此設定是為了能夠顯示原圖的邊緣，因為小框是有一定寬高的，而指針隻是一個點）

//滑鼠移入/移動時
  function imgMouseMove(event) {
    $(".bigGlass").css("display","block");
    $(".bigImg").css("display","block");
    var _this = $(this);
    var _mark = $(this).children(".grayImg");
    //滑鼠在小圖上的位置
    mouseX = event.pageX - _this.offset().left - _mark.outerWidth()/2;
    mouseY = event.pageY - _this.offset().top - _mark.outerHeight()/2;
    $(".grayImg").css("opacity", "1");
    $(".good-img").find("img").css("opacity", "0.7");
           

1. 最後我們可以設定一下小框的最大移動位置

//最大值
 maxLeft = _this.width() - _mark.outerWidth();
 maxTop = _this.height() - _mark.outerHeight();
 markLeft = mouseX;
 markTop = mouseY;
 updataMark(_mark);
 updataBig();
           

最後上一下html和css部分大家可以參考一下；

<div class="bigGlass">
        <img class="bigImg" src="../images/goodsDetails/758a2dae167ec24e14e5e01cf94105f4_400_400.png">
    </div>
    <div class="good-img">
        <div class="grayImg"></div>
        <img class="good-sImg" src="../images/goodsDetails/24bfb60d8ca48ed5b69cad133ef872e4.png" >
    </div>
           

//注：css部分是用scss寫的
.goods-details .bigGlass {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid #999;
    border-radius: 2px;
    left: 500px;
    top: 40px;
    overflow: hidden; }
    .goods-details .bigGlass .bigImg {
      width: 700px;
      height: 700px;
      position: absolute; }
  .goods-details .good-img {
    width: 500px;
    height: 500px;
    float: left;
    margin-top: 40px; }
    .goods-details .good-img .grayImg {
      position: absolute;
      background-position: 0 0;
      box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
      width: 100px;
      height: 100px;
      display: none;
      z-index: 2; }
    .goods-details .good-img .good-sImg {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 50px; }
           

大家看明白了嗎，試着自己寫一個放大鏡吧