摘要：本次文章的主要內(nèi)容是介紹一下淘寶的放大鏡效果是如何實現(xiàn)的，相信很多同學們對這個并不陌生。這個看似感覺很復(fù)雜的小功能，實際上原理卻是非常的簡單，下面我們學習一下淘寶放大鏡效果是如何實現(xiàn)的。

這一段時間事情挺多的，一直沒有時間寫文章。這兩天稍微閑了一些，就趁這會閑工夫?qū)懸黄恼?。本次文章的主要?nèi)容是介紹一下淘寶的放大鏡效果是如何實現(xiàn)的，相信很多同學們對這個并不陌生。這個看似感覺很復(fù)雜的小功能，實際上原理卻是非常的簡單，下面我們學習一下淘寶放大鏡效果是如何實現(xiàn)的。

我們整個項目結(jié)構(gòu)并不復(fù)雜，由images目錄、jquery-3.2.1.min.js、style.css、main.js、index.html等內(nèi)容構(gòu)成。

images目錄。存放項目所使用的圖片素材。

jquery-3.2.1.min.js。jQuery庫（如果你想熟悉一下原生JS，可不選）。

style.css。控制項目css樣式文件。

main.js。控制項目邏輯的js文件。

index.html。控制項目dom結(jié)構(gòu)。

放大鏡 == 100*100橘色方塊 簡稱：方塊1

左窗口 == 200*200藍色方塊 簡稱：方塊2

右窗口 == 200*200紫色方塊 簡稱：方塊3

原圖 == 400*400青色方塊 簡稱：方塊4

大致原理如下：
用一個表達式就是：方塊1的left值（或top值）/方塊4的left值（或top值）=（-1）*方塊2的寬度/方塊4的寬度。這里我們需要注意的是方塊1的定位父級是方塊2，方塊4的定位父級是方塊3。另外小圖的長寬與左窗口的長寬保持一致。我們等比例地根據(jù)方塊1的top值和left值去修改方塊4的top值和left值，并且方塊超出部分不可見，就可以實現(xiàn)放大鏡效果。

.mask 代表 放大鏡

.leftView 代表 左窗口

.rightView 代表 右窗口

.bigImg 代表 原圖

#container{
   position: relative;    
}
.leftView{
    position: relative;
    width: 418px;
    height: 418px;
}
.smallImg{
    max-height: 100%;
    max-width: 100%;
}
.mask{
    display: none;
    position: absolute;
    background: url(./images/mask_bg.png);
    cursor: move;
}
.rightView{
    position: absolute;
    left:458px;
    top:0;
    width:418px;
    height:418px;
    overflow:hidden; 
}
.bigImg{
    position: absolute;
    top:0;
    left:0;
}

這里說明一下我們?yōu)槭裁匆獎討B(tài)計算放大鏡的長寬，主要原因是原圖的長寬是不確定的。但是我們要滿足放大鏡/右窗口=左窗口/原圖,這里左窗口和右窗口的長寬是確定的，所以放大鏡的長寬是需要根據(jù)原圖的長寬進行計算。

  function calculateMaskWH(){
         var width=$(".leftView").width()/$(".bigImg").width()*$(".rightView").width();
         var height=$(".leftView").height()/$(".bigImg").height()*$(".rightView").height();
         $(".mask").css({
            "width":width,
            "height":height
         });
    }

在鼠標沒有懸浮在左窗口時，放大鏡、右窗口和原圖是不可見的。當鼠標懸浮在左窗口之上時，放大鏡、右窗口和原圖是可見的。

 //監(jiān)聽鼠標mouseover事件
 $(".leftView").on("mouseover",function(){
        $(".mask").css("display","block");
        $(".rightView").css("display","block");        
    });
 //監(jiān)聽鼠標mouseout事件  
 $(".leftView").on("mouseout",function(){
        $(".mask").css("display","none");
        $(".rightView").css("display","none");
    });

監(jiān)聽mousemove事件，我們需要干兩件事。第一件事，動態(tài)改變放大鏡的top值和left值。第二件事是根據(jù)放大鏡的top值和left值，等比例修改原圖的top值和left值。因此我們這里的難點就是如何計算top值和left值。另外，我們要保證放大鏡不能出界。

 $(".leftView").on("mousemove",function(event){
        //計算放大鏡的left值和top值
        var left=event.pageX-$(this).offset().left-$(".mask").width()/2;
        var top=event.pageY-$(this).offset().top-$(".mask").height()/2;
        //判斷放大鏡左右是否出界
        if(left<0){
            left=0
        }else if(left>$(this).width()-$(".mask").width()){
            left=$(this).width()-$(".mask").width();
        }
        //判斷放大鏡上下是否出現(xiàn)
        if(top<0){
            top=0;
        }else if(top>$(this).height()-$(".mask").height()){
            top=$(this).height()-$(".mask").height();
        }
        $(".mask").css({
            left:left+"px",
            top:top+"px"
        });
        //計算比例
        var rate=$(".bigImg").width()/$(".leftView").width();
        $(".bigImg").css({
            left:-rate*left+"px",
            top:-rate*top+"px"
        });
    });

$(function(){
    //計算放大鏡的長寬
    calculateMaskWH(); 
    //監(jiān)聽鼠標mouseover事件
    $(".leftView").on("mouseover",function(){
        $(".mask").css("display","block");
        $(".rightView").css("display","block");        
    });
    //監(jiān)聽鼠標mouseout事件    
    $(".leftView").on("mouseout",function(){
        $(".mask").css("display","none");
        $(".rightView").css("display","none");
    });
    $(".leftView").on("mousemove",function(event){
        //計算放大鏡的left值和top值
        var left=event.pageX-$(this).offset().left-$(".mask").width()/2;
        var top=event.pageY-$(this).offset().top-$(".mask").height()/2;
        //判斷放大鏡左右是否出界
        if(left<0){
            left=0
        }else if(left>$(this).width()-$(".mask").width()){
            left=$(this).width()-$(".mask").width();
        }
        //判斷放大鏡上下是否出現(xiàn)
        if(top<0){
            top=0;
        }else if(top>$(this).height()-$(".mask").height()){
            top=$(this).height()-$(".mask").height();
        }
        $(".mask").css({
            left:left+"px",
            top:top+"px"
        });
        //計算比例
        var rate=$(".bigImg").width()/$(".leftView").width();
        $(".bigImg").css({
            left:-rate*left+"px",
            top:-rate*top+"px"
        });
    });
    //計算機放大鏡的長寬
    function calculateMaskWH(){
         var width=$(".leftView").width()/$(".bigImg").width()*$(".rightView").width();
         var height=$(".leftView").height()/$(".bigImg").height()*$(".rightView").height();
         $(".mask").css({
            "width":width,
            "height":height
         });
    }
});