js---電商中常見的放大鏡效果

時間 2019-11-09

標籤常見的放大鏡效果欄目 JavaScript 简体版

原文原文鏈接

js中的放大鏡效果

在電商中，放大鏡效果是很常見的，以下圖所示：

當鼠標懸浮時，遮罩所在區域在右側進行放大。
在動手寫以前，咱們要先理清思路，分析需求，所需知識點，再將每一塊進行組裝，最後進行功能的完善。html

首先，需求分析：

打開頁面是看到只有一張圖片
鼠標懸浮在圖片上上時遮罩和右側圖片顯示出來
遮罩隨着鼠標的移動而移動
右側圖片隨着遮罩的移動而移動

其實，想此類兩個圖片在不一樣位置，通常都是多圖片進行配合運動造成的效果。
本案例中左側使用的是小圖片，右側使用的是大圖片。this

所需知識點：

元素的隱藏和顯示 display:none / block
右側大圖片只有部分顯示，全部須要溢出隱藏 overflow：hidden
遮罩和大圖片須要移動，全部要用到定位。position : absolute;

下面咱們來寫代碼：code

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>放大鏡</title>
    <style>
        /* 預約義樣式 */
        *{
            padding: 0;
            margin: 0;
        }
        /* 處理容器 */
        #box{
            margin: 100px 200px;
        }
        #box,#d_small{
            width: 400px;
            height: 240px;
            display: inline-block;
            border: 1px sold red;
            position: relative; 
        }
        /* 大圖片的容器 */
        /* 由於遮罩是正方形，全部大圖片的顯示部分也要是正方形，這樣視覺效果纔會更好 */
        #d_big {
            width: 240px;
            height: 240px;
            position: absolute;
            top:0;
            left: 400px;
            overflow: hidden;
            display: none;
            border: 1px solid red;
        }
        /* 左側小圖片*/
        #d_small img{
            width: 400px;
            height: 240px;
            vertical-align: top;
        }
        /* 大圖片的尺寸和小圖片寬高比例要一直，避免穿幫 */
        #d_big img{
            width: 800px;
            height: 480px;
            vertical-align: top;
            position: absolute;
            top:0;
            left:0;
        }
        /* 遮罩樣式 */
        #mask{
            width: 100px;
            height: 100px;
            background-color: rgba(225,225,250,.6);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }   
    </style>
</head>
<body>
    <div id="box">
        <div id="d_small">
            <img src="img/1.jpg">
            <div id="mask"></div>
        </div>
        <div id="d_big"><img src="img/2.jpg"></div>
        
    </div>
</body>
</html>

下面來寫一下jshtm

<script>
    // 獲取節點
    var small = document.getElementById("d_small"); //獲取小圖片的容器
    var smallImage = small.children[0]; //獲取小圖片
    var mask = small.children[1];   //獲取遮罩
    var big = document.getElementById("d_big"); //獲取大圖片的容器
    var bigImage = big.children[0]; //獲取大圖片
    // 綁定鼠標事件
    // 鼠標懸浮在小圖片時,讓遮罩和大圖片顯示處理
    small.onmouseover = function(){
        mask.style.display = "block";
        big.style.display = "block";    
    }
    // 鼠標移出時再消失
    small.onmouseout = function(){
        mask.style.display = "none";
        big.style.display = "none"; 
    }
    // 鼠標移動時,遮罩跟着移動,而且大圖片跟着以相同比例移動
    // 綁定鼠標移動事件
    // Event 是一個事件對象，當一個事件發生後，和當前事件發生相關的詳細信息會被臨時存儲到一個指定的地方，也就是event對象，
    
    // 聲明一個變量用來儲存遮罩的座標位置
    var x = 0;
    var y = 0;
    small.onmousemove = function(event){
        // 做兼容
        var event = event || window.event;
        
        // 遮罩中心點X座標 = 鼠標X座標 - 定位的父級元素的左偏移量 - 1/2的遮罩的寬度
        var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
        var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
        // console.log(x,y);
        // 用來判斷遮罩達到小圖片邊界是的情況,以避免遮罩移出小圖片框
        if(x < 0){
            x = 0
        }else if (x > small.offsetWidth - mask.offsetWidth){
            x = small.offsetWidth - mask.offsetWidth;
        };
        if(y < 0){
            y = 0
        }else if (y > small.offsetHeight - mask.offsetHeight){
            y = small.offsetHeight - mask.offsetHeight;
        };
        // 遮罩的動態定位
        mask.style.left = x + "px";
        mask.style.top = y + "px";
        // 設置右側大圖片的移動(大圖片的移動 = 大圖片與小圖片的比例 * 遮罩的移動)
        // a,b爲大圖片想作和向上的偏移量
        var a = -x * bigImage.offsetWidth / smallImage.offsetWidth; 
        var b = -y * bigImage.offsetHeight / smallImage.offsetHeight; 
        
        // 爲防止右側和下側出現空白區域,進行一個判斷
        if(a < -(bigImage.offsetWidth - big.offsetWidth)){
            bigImage.style.left =- (bigImage.offsetWidth - big.offsetWidth )+ "px";
        }else{
            bigImage.style.left = -x * bigImage.offsetWidth / smallImage.offsetWidth + 'px';
        }       
        if(b < -(bigImage.offsetHeight - big.offsetHeight)){
            bigImage.style.top = -(bigImage.offsetHeight - big.offsetHeight) + "px";
        }else{
            bigImage.style.top = -y * bigImage.offsetHeight / smallImage.offsetHeight + 'px';
        }       
    }

</script>

相關標籤/搜索

每日一句

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