前言

代碼思想及代碼實作

效果圖展示

整體思想

HTML部分

CSS部分

JavaScript部分

完整代碼

總結

前言

放大鏡可以說是前端人必須學會的程式之一！今天本美女就用京東距離為大家展示一下怎么實作放大鏡的效果！相比較html和css而言，js更重要的就是你需要想明白程式的思想以及怎么一步步實作自己的想法，話不多說開整！

代碼思想及代碼實作

效果圖展示

整個效果就是當滑鼠放到展示圖上的時候，會出現一個遮罩層以及彈出來一個框展示一個詳情圖，并且滑鼠移動的時候詳情圖跟著移動，滑鼠離開詳情圖消失，

整體思想

當滑鼠放在展示圖上方時，出現遮罩層并且出現詳情圖；
當滑鼠離開展示圖時遮罩層和詳情圖消失；
滑鼠需要在遮罩層中央，遮罩層半透明；
展示圖和詳情圖需要移動比例相同；

HTML部分

主要是兩個盒子：

定義為box類：用于存放展示的圖片（展示圖）、遮罩層；
定義為big類：用于存放大的圖片（詳情圖）；

 <div class="box">
        <img src="../img/ip.jpg" alt="">
        <div class="mask"></div>
    </div>

    <div class="big">
        <img src="../img/ip10.jpg" alt="" class="img">
    </div>

CSS部分

box類：選擇合適的大小，設定好寬度和高度，設定浮動效果讓big類能夠和box在同一排顯示（根據自身情況調整不需要可以不設定）；

.box {
            width: 450px;
            height: 450px;
            border: 1px solid #ccc;
            float: left;/*設定浮動使得兩個盒子在一排顯示*/
            position: relative;/*設定定位 根據自身情況可以改為絕對定位 */
            margin: 10px;
        }

big類：給盒子設定合適的大小，因為會詳情圖一般情況下是會超過盒子的大小的，需要設定超出部分隱藏，設定詳情圖為不可見，需要設定定位，因為詳情圖后面會需要定位；

 .big {
            width: 600px;
            height: 600px;
            overflow: hidden;/*超出部分隱藏*/
            border: 1px solid #ccc;
            position: relative;  /*設定定位 根據自身情況可以改為絕對定位 */
            display: none;/*默認不顯示 滑鼠經過box時顯示*/
        }

mask類：需要設定定位，left 和top值設為0；透明度設定為0.5左右，設定一個自己喜歡的顏色，滑鼠經過的樣式設定以及設定為不可見；

 .mask {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;/*在box類里面定位 層級高于展示圖*/
            top: 0px;
            left: 0px;
            opacity: .5;/*設定遮罩層的透明度*/
            cursor: move;/*滑鼠經過的時候變成十字拖動樣式*/
            display: none;/*默認不顯示 滑鼠經過box時顯示*/
        }

img類（詳情圖）：只需要添加絕對定位以及把top和left設為0即可；

 .img {
            position: absolute;/*在big盒子里面絕對定位*/
            /*JavaScript需要賦值需要設定top和left值*/
            top: 0px;
            left: 0px;
        }

JavaScript部分

獲取元素

        var mask = document.querySelector('.mask');
        var box = document.querySelector('.box');
        var big = document.querySelector('.big');
        var img = document.querySelector('.img');

實作滑鼠經過展示圖的時候，詳情圖和遮罩層的顯示與隱藏；

 box.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';

        });
        box.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        });

獲取滑鼠的位置，讓滑鼠位于遮罩層的中央；

為了幫助更好的理解我在這里畫了個圖，e.pageY - box.offsetTop即可獲得滑鼠在box盒子里面的做坐標，我們把這個獲取的滑鼠值給遮罩層，但是直接將滑鼠值給遮罩層會偏移需要調整；

我們把這個獲取的滑鼠值給遮罩層，但是直接將滑鼠值給遮罩層會偏移需要調整到遮罩層中央；

        
        //得到的x和y是滑鼠在盒子內的坐標  this指向box
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

        //將獲取到的滑鼠的值給遮罩層（減去一半是因為讓滑鼠在遮罩層中央） 讓它跟著滑鼠移動
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;

設定遮罩層的最大移動距離，不可以超出box盒子；

距離的計算box.offsetWidth - mask.offsetWidth即可得到可以移動的寬度值，box.offsetHeight - mask.offsetHeight即可得到可以移動的高度值；移動距離最小為0，最大不可以超過寬度值（高度值），

           //設定最大移動距離
            var maskWidth = box.offsetWidth - mask.offsetWidth;
            var maskHeight = box.offsetHeight - mask.offsetHeight;

            //控制mask移動的范圍
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskWidth) {
                maskX = maskWidth;
            }

            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskHeight) {
                maskY = maskHeight;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

實作展示圖和詳情圖移動比例相同，達到一致的移動效果；

mask和詳情圖（大圖）有一定的比例公式，轉換之后就可以實作同步轉換，但是需要注意方向會影響正負值，最后將計算出來的值賦給img的top和left，

           //大圖最大移動距離
            var imgWidth = img.offsetWidth - big.offsetWidth;
            var imgHeight = img.offsetHeight - big.offsetHeight;

            //大圖片的移動距離 = mask移動距離 * 大圖最大移動距離 /mask的最大移動距離  
            var bigX = maskX * imgWidth / maskWidth;
            var bigY = maskY * imgHeight / maskHeight;

            //賦值  注意方向相反取負值
            img.style.left = (-bigX) + 'px';
            img.style.top = (-bigY) + 'px';

完整代碼

<!DOCTYPE html>
<html lang="zn">

<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>
    <style>
        .box {
            width: 450px;
            height: 450px;
            border: 1px solid #ccc;
            float: left; /*設定浮動使得兩個盒子在一排顯示*/
            position: relative;/*設定定位 根據自身情況可以改為絕對定位 */
            margin: 10px;
        }

        .big {
            width: 600px;
            height: 600px;
            overflow: hidden;/*超出部分隱藏*/
            border: 1px solid #ccc;
            position: relative; /*設定定位 根據自身情況可以改為絕對定位 */
            display: none;/*默認不顯示 滑鼠經過box時顯示*/
        }

        .mask {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;/*在box類里面定位 層級高于展示圖*/
            top: 0px;
            left: 0px;
            opacity: .5;/*設定遮罩層的透明度*/
            cursor: move;/*滑鼠經過的時候變成十字拖動樣式*/
            display: none;/*默認不顯示 滑鼠經過box時顯示*/
        }

        .img {
            position: absolute;/*在big盒子里面絕對定位*/
            /*JavaScript需要賦值需要設定top和left值*/
            top: 0px;
            left: 0px;
            
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../img/ip.jpg" alt="">
        <div class="mask"></div>
    </div>

    <div class="big">
        <img src="../img/ip10.jpg" alt="" class="img">
    </div>

    <script>
        var mask = document.querySelector('.mask');
        var box = document.querySelector('.box');
        var big = document.querySelector('.big');
        var img = document.querySelector('.img');

        box.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';

        });

        box.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        });

        box.addEventListener('mousemove', function (e) {

            //得到的x和y是滑鼠在盒子內的坐標  this指向box
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

          //將獲取到的滑鼠的值給遮罩層（減去一半是因為讓滑鼠在遮罩層中央） 讓它跟著滑鼠移動
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;


            //設定最大移動距離
            var maskWidth = box.offsetWidth - mask.offsetWidth;
            var maskHeight = box.offsetHeight - mask.offsetHeight;
            //控制mask移動的范圍
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskWidth) {
                maskX = maskWidth;
            }

            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskHeight) {
                maskY = maskHeight;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';

             //大圖最大移動距離
            var imgWidth = img.offsetWidth - big.offsetWidth;
            var imgHeight = img.offsetHeight - big.offsetHeight;

            //大圖片的移動距離 = mask移動距離 * 大圖最大移動距離 /mask的最大移動距離  
            var bigX = maskX * imgWidth / maskWidth;
            var bigY = maskY * imgHeight / maskHeight;

            //賦值
            img.style.left = (-bigX) + 'px';
            img.style.top = (-bigY) + 'px';

        });

    </script>


</body>

</html>

總結

家人們！收藏這篇博客以備不時之需，以后就不會擔心放大鏡效果不會做了！前端人前端魂，不會放大鏡效果誓不為人！

放大鏡效果總共分三步：

滑鼠放上去顯示，否則隱藏；
滑鼠的坐標計算之后給遮罩層，記得放中間；
移動比例一定，直接套用公式！

注意：千萬不要把資料寫死，要寫成公式方便修改！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/339507.html

標籤：AI

上一篇：shell測驗工具框架

下一篇：Javascript知識分享——流程控制

前端必學——用JavaScript實作電商圖片放大鏡效果（附代碼）

前言

代碼思想及代碼實作

效果圖展示

整體思想

HTML部分

CSS部分

JavaScript部分

完整代碼

總結