JS實現京東放大鏡效果

2022-07-04 18:01:08

本文範例為大家分享了JS實現京東放大鏡效果的具體程式碼，供大家參考，具體內容如下

需要實現的效果圖如下：

①佈局：佈局採用一個大盒子裡面首先分為上下兩個部分，然後下部分又分為左右兩個部分。左邊的盒子裡面放了一個img和一個遮罩層cover，右邊盒子裡面放的是800*800的大圖片，這裡提供左邊的圖片b3.png和右邊的大圖片big.jpg:

注意：左邊盒子裡面的cover採用絕對定位，右邊盒子裡面的img採用絕對定位。

②功能實現：主要有三個功能模組：

1.滑鼠經過（mouseover）左邊盒子，黃色的遮罩層以及右邊盒子顯示，滑鼠離開（mouseout）則隱藏黃色遮罩層以及右邊盒子。

2.黃色遮罩層跟隨滑鼠移動（mousemove）。滑鼠在盒子的座標=滑鼠在頁面的座標-左邊盒子在頁面的座標，但是又因為滑鼠是在遮罩層的中間，所以最終的座標要減去遮罩層一半的高度和寬度。注意這裡有邊界條件：就是黃色遮罩層的移動距離，黃色遮罩層的x方向的移動距離不能小於0且不能大於左邊盒子寬度減去遮罩層的寬度。

3.移動黃色遮罩層，大圖片跟隨移動功能。大圖片移動的距離根據下面這個公式來進行計算：

遮擋層的移動距離上一點已經算過了，遮罩層的最大移動距離上面也說了，剩下的就是大圖片最大移動距離，大圖片最大移動距離=圖片的大小-右邊盒子的大小。

最後全部程式碼如下：

html程式碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京東放大鏡效果</title>
    <script src="../js/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            list-style: none;
        }
        /* 外面大盒子 */
        
        .container {
            box-sizing: border-box;
            width: 1200px;
            height: 500px;
            /* background-color: pink; */
            margin: 200px auto;
        }
        
        .container .topbox {
            width: 100%;
            height: 60px;
            /* background-color: violet; */
            border-bottom: 2px solid #bc2815;
        }
        
        .container .topbox ul {
            margin-left: 10px;
        }
        
        .container .topbox ul li {
            float: left;
            font-size: 22px;
            color: #4e535b;
            padding: 15px 20px;
        }
        
        .container .topbox ul li:hover {
            color: white;
            background-color: #bc2815;
        }
        
        .container .topbox ul li:first-child {
            color: white;
            background-color: #bc2815;
        }
        
        .container .bottombox .leftbox {
            float: left;
            height: 400px;
            width: 400px;
            /* background-color: violet; */
            margin-top: 10px;
        }
        
        .container .bottombox .leftbox ul {
            overflow: hidden;
            margin-left: 10px;
        }
        
        .container .bottombox .leftbox ul li {
            float: left;
            font-size: 14px;
            color: #4e535b;
        }
        
        .container .bottombox .leftbox .leftphone {
            position: relative;
            overflow: hidden;
            width: 400px;
            height: 400px;
            /* background-color: pink; */
            margin-top: 5px;
            margin-left: 10px;
            border: 1px solid #c8cbc8;
        }
        
        .leftbox .leftphone img {
            width: 100%;
            height: 100%;
        }
        
        .container .bottombox .leftbox .leftphone .cover {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 220px;
            height: 220px;
            background-color: #ffeba2;
            opacity: 0.5;
            border: 1px solid #ccc;
            cursor: move;
        }
        
        .container .bottombox .rightbox {
            float: left;
            margin-top: 10px;
            width: 420px;
            height: 420px;
            margin-left: 20px;
            /* background-color: violet; */
        }
        
        .container .bottombox .rightbox {
            position: relative;
            display: none;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        
        .container .bottombox .rightbox img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="topbox">
            <ul>
                <li>全部商品分類</li>
                <li>服裝城</li>
                <li>美妝館</li>
                <li>傳智超市</li>
                <li>全球購</li>
                <li>閃購</li>
                <li>團購</li>
                <li>拍賣</li>
                <li>有趣</li>
            </ul>
        </div>
        <div class="bottombox">
            <div class="leftbox">
                <div class="leftnav">
                    <ul>
                        <li>手機、數碼、通訊&nbsp;&nbsp;></li>
                        <li>手機&nbsp;&nbsp;></li>
                        <li>Apple蘋果&nbsp;&nbsp;></li>
                        <li>iphone 6S Plus系統&nbsp;&nbsp;</li>
                    </ul>
                    <div class="leftphone">
                        <img src="../b3.png" alt="">
                        <div class="cover"></div>
                    </div>
                </div>
            </div>
            <div class="rightbox">
                <img src="../big.jpg" alt="" class="big">
            </div>
        </div>
 
    </div>
</body>
 
</html>

外部js檔案：

window.addEventListener('load', function() {
    // 獲取元素
    var cover = this.document.querySelector('.cover');
    var leftphone = this.document.querySelector('.leftphone');
    var rightbox = this.document.querySelector('.rightbox');
    var big = this.document.querySelector('.big');
    // 滑鼠移動到左邊的手機上的時候遮罩層和右邊的手機顯示出來
    leftphone.addEventListener('mouseover', function() {
        cover.style.display = 'block'
        rightbox.style.display = 'block'
    })
    // 滑鼠移離開到左邊的手機上的時候遮罩層和右邊的手機隱藏 
    leftphone.addEventListener('mouseout', function() {
        cover.style.display = 'none'
        rightbox.style.display = 'none'
    })
    leftphone.addEventListener('mousemove', function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // x的移動距離
        var totalx = x - cover.offsetWidth / 2;
        var totaly = y - cover.offsetHeight / 2
        if (totalx < 0) {
            totalx = 0;
        } else if (totalx >= leftphone.offsetWidth - cover.offsetWidth) {
            totalx = leftphone.offsetWidth - cover.offsetWidth;
        }
        if (totaly < 0) {
            totaly = 0;
        } else if (totaly >= leftphone.offsetHeight - cover.offsetHeight) {
            totaly = leftphone.offsetHeight - cover.offsetHeight;
        }
        cover.style.left = totalx + 'px';
        cover.style.top = totaly + 'px';
        // imgmaxx是圖片最大x移動距離
        var imgmaxx = rightbox.offsetWidth - big.offsetWidth;
        var imgmaxy = rightbox.offsetHeight - big.offsetHeight;
        var imgmovex = totalx * imgmaxx / (leftphone.offsetWidth - cover.offsetWidth)
        var imgmovey = totaly * imgmaxy / (leftphone.offsetHeight - cover.offsetHeight)
        big.style.left = imgmovex + 'px';
        big.style.top = imgmovey + 'px';
 
    })
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JS實現京東放大鏡效果

熱門文章