js如何實(shí)現(xiàn)仿京東放大鏡

發(fā)布時(shí)間：2022-07-04 09:24:17 來(lái)源：億速云閱讀：168 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“js如何實(shí)現(xiàn)仿京東放大鏡”，在日常操作中，相信很多人在js如何實(shí)現(xiàn)仿京東放大鏡問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”js如何實(shí)現(xiàn)仿京東放大鏡”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1.實(shí)現(xiàn)效果：

移動(dòng)遮擋框，右邊的圖片響應(yīng)的放大并移動(dòng)。

2.實(shí)現(xiàn)思路：

（1）鼠標(biāo)移動(dòng)到圖片上，遮罩層和右邊盒子顯示。鼠標(biāo)移出，遮罩層和右邊盒子消失。

（2）黃色遮罩層跟隨鼠標(biāo)移動(dòng)

js如何實(shí)現(xiàn)仿京東放大鏡

（3）右邊圖片跟隨左邊圖片移動(dòng)

js如何實(shí)現(xiàn)仿京東放大鏡

注意：右邊圖片的移動(dòng)方向與左邊遮罩層的移動(dòng)方向相反，因此，右邊圖片移動(dòng)距離是負(fù)的。

右邊大盒子：多余的圖片不顯示，用overflow:hidden.來(lái)隱藏

3.代碼展示

<!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>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .preview {
            position: relative;
            float: left;
            width: 400px;
            height: 300px;
        }
        .small {
            width: 400px;
            height: 300px;
        }
        .mask {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
            background-color: rgba(199, 211, 91, 0.3);
            cursor: move;
        }
        .big {
            display: none;
            position: absolute;
            top:0px;
            left:410px;
            background-color: thistle;
            width: 600px;
            height: 500px;
            z-index: 999;
            overflow: hidden;
            /* 超過圖片的部分會(huì)隱藏 */
        }
        .bigImg {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class = "preview">
        <img class = "small" src="bg2.jpg" alt="">
        <div class="mask"></div>
        <div class="big"><img class = "bigImg" src="bg2.jpg" alt=""></div>
    </div>
    
    <script>
        var mask = document.querySelector('.mask');
        
        var preview = document.querySelector('.preview');
        var big = document.querySelector('.big');
        preview.addEventListener('mousemove', function(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // 找到鼠標(biāo)在盒子內(nèi)的坐標(biāo)。
            var new_x = x-mask.offsetWidth/2;
            var new_y = y - mask.offsetHeight/2;
            // 限制黃色盒子的坐標(biāo)。不能移動(dòng)到盒子外。最大運(yùn)動(dòng)坐標(biāo)：盒子寬（高）-遮罩層寬（高）；最小運(yùn)動(dòng)坐標(biāo)0
            if(new_x > this.offsetWidth - mask.offsetWidth) {
                new_x = this.offsetWidth - mask.offsetWidth;
            } else if(new_x < 0) {
                new_x = 0;
            }
            if(new_y > this.offsetHeight - mask.offsetHeight) {
                new_y = this.offsetHeight - mask.offsetHeight;
            } else if(new_y < 0) {
                new_y = 0;
            }
            mask.style.left =  new_x+ 'px';
            mask.style.top =  new_y + 'px';
            // 大盒子的運(yùn)動(dòng)像素，應(yīng)該按照小盒子運(yùn)動(dòng)的一定比例來(lái)運(yùn)動(dòng)。
            // 公式：遮擋層移動(dòng)距離 / 最大移動(dòng)距離 = 大圖片移動(dòng)距離 / 最大移動(dòng)距離
            // 所以：大圖片移動(dòng)距離 = 遮擋層移動(dòng)距離 * 大圖片最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離。
            var bigImg = document.querySelector('.bigImg');
            var big = document.querySelector('.big');
            // 遮罩層最大移動(dòng)距離x
            var maskMax_x = this.offsetWidth - mask.offsetWidth;
            // 大圖片最大移動(dòng)距離x
            var bigMax_x = bigImg.offsetWidth - big.offsetWidth;
            // 大圖片的移動(dòng)距離x
            var bigX = new_x * bigMax_x / maskMax_x;
            // 遮罩層最大移動(dòng)距離y
            var maskMax_y = this.offsetHeight - mask.offsetHeight;
            // 大圖片最大移動(dòng)距離y
            var bigMax_y = bigImg.offsetHeight - big.offsetHeight;
            // 大圖片的移動(dòng)距離y
            var bigY = new_y * bigMax_y / maskMax_y;
            bigImg.style.left =  -bigX+ 'px';
            bigImg.style.top =  -bigY + 'px';
 
        });
        preview.addEventListener('mouseover', function() {
            big.style.display = 'block';
            mask.style.display = 'block';
        });
        preview.addEventListener('mouseout', function() {
            big.style.display = 'none';
            mask.style.display = 'none';
        });
 
    </script>
</body>
</html>

到此，關(guān)于“js如何實(shí)現(xiàn)仿京東放大鏡”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問一下細(xì)節(jié)

js如何實(shí)現(xiàn)仿京東放大鏡

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽