仿淘寶的放大鏡效果

時間 2019-12-11

標籤淘寶放大鏡效果简体版

原文原文鏈接

前言

這一段時間事情挺多的，一直沒有時間寫文章。這兩天稍微閒了一些，就趁這會閒工夫寫一篇文章。本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的，相信不少同窗們對這個並不陌生。這個看似感受很複雜的小功能，實際上原理倒是很是的簡單，下面咱們學習一下淘寶放大鏡效果是如何實現的。css

實現過程

項目結構

咱們整個項目結構並不複雜，由images目錄、jquery-3.2.1.min.js、style.css、main.js、index.html等內容構成。html

images目錄。存放項目所使用的圖片素材。jquery
jquery-3.2.1.min.js。jQuery庫（若是你想熟悉一下原生JS，可不選）。dom
style.css。控制項目css樣式文件。學習
main.js。控制項目邏輯的js文件。ui
index.html。控制項目dom結構。this

素材

小圖(small.jpg)

原圖(big.jpg)

放大鏡背景圖(mask_bg.jpg)

實現原理

放大鏡 == 100*100橘色方塊 簡稱：方塊1url
左窗口 == 200*200藍色方塊 簡稱：方塊2spa
右窗口 == 200*200紫色方塊 簡稱：方塊3code
原圖 == 400*400青色方塊 簡稱：方塊4

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

文件內容

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿淘寶放大鏡效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
    <div class="leftView">
        <div class="mask"></div>
        <img class="smallImg" src="images/small.jpg" alt="縮小版"/>
    </div>
    <div class="rightView">
        <img class="bigImg" src="images/big.jpg" alt="放大版"/>
    </div>
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="main.js"></script>
</html>

.mask 表明放大鏡
.leftView 表明左窗口
.rightView 表明右窗口
.bigImg 表明原圖

CSS

#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;
}

JS各模塊實現

計算放大鏡的長寬

這裏說明一下咱們爲何要動態計算放大鏡的長寬，主要緣由是原圖的長寬是不肯定的。可是咱們要知足放大鏡/右窗口=左窗口/原圖,這裏左窗口和右窗口的長寬是肯定的，因此放大鏡的長寬是須要根據原圖的長寬進行計算。

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

監聽左窗口mouseover和mouseout事件

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

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

監聽左窗口mousemove事件

監聽mousemove事件，咱們須要幹兩件事。第一件事，動態改變放大鏡的top值和left值。第二件事是根據放大鏡的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();
        }
        //判斷放大鏡上下是否出現
        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'
        });
    });

JS完整代碼

$(function(){
    //計算放大鏡的長寬
    calculateMaskWH(); 
    //監聽鼠標mouseover事件
    $('.leftView').on('mouseover',function(){
        $('.mask').css('display','block');
        $('.rightView').css('display','block');        
    });
    //監聽鼠標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();
        }
        //判斷放大鏡上下是否出現
        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
         });
    }
});

最終效果演示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。