模拟京东放大镜代码

萧寂173

于 2022-10-10 16:14:36 发布

阅读量178

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_68658847/article/details/127246849

版权

<!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>Document</title>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        #__bs_notify__ {
            display: none !important;
        }

        /*上面的选择器不要删,否则内置预览会有个黑色的块,在下方写页面其他选择器*/
        nav {
            display: flex;
        }

        .xt {
            width: 400px;
            height: 400px;
            border: 1px solid;
            position: relative;
        }

        .xt>img {
            width: 190px;
            height: 257px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }

        .datu {
            width: 400px;
            height: 400px;
            margin-left: 50px;
            border: 1px solid;
            position: relative;
            overflow: hidden;
            display: none;
        }

        .datu>p {
            position: absolute;
            left: 0;
            top: 0;
            width: 700px;
            height: 700px;
            z-index: 3;
        }

        .datu>p>img {
            width: 380px;
            height: 514px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }

        .mask {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: pink;
            opacity: .5;
            display: none;
        }
    </style>
</head>

<body>
    <nav>
        <div class="xt">
            <img src="https://www.apple.com.cn/v/iphone/home/bk/images/overview/compare/compare_iphone_14_pro__cjmfbiggqhpy_large.jpg"
                alt="">
            <p class="mask"></p>
        </div>
        <div class="datu">
            <p>
                <img src="https://www.apple.com.cn/v/iphone/home/bk/images/overview/compare/compare_iphone_14_pro__cjmfbiggqhpy_large.jpg"
                    alt="">
            </p>
        </div>
    </nav>

    <script>
        //获取所有元素
        let mask = document.querySelector(".mask");
        let datu = document.querySelector(".datu");
        let xt = document.querySelector(".xt");
        let p = document.querySelector(".datu>p")
        let nav = document.querySelector("nav")
        //鼠标移入显示mask块和放大的块
        xt.addEventListener("mouseover", function () {
            mask.style.display = "block"
            datu.style.display = "block"
        })
        xt.addEventListener("mouseout", function () {
            mask.style.display = "none"
            datu.style.display = "none"
        })
        //鼠标移入隐藏mask块和放大的块
        xt.addEventListener("mousemove", function (e) {
            //获取鼠标在浏览器中的坐标e.pageX，e.pageY 
            //offsetLeft获取当前对象的左边距和上边距
            //两者相减就是鼠标在盒子中的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

            //将鼠标光标移入到遮罩层mask的中央位置
            var maskx = x - mask.offsetWidth / 2
            var masky = y - mask.offsetHeight / 2

            //遮罩层父元素的宽-遮罩层的宽，剩余的就是可移动部分，即:max为最大可移动距离
            var max = xt.offsetWidth - mask.offsetWidth
            if (maskx <= 0) {
                maskx = 0
            } else if (maskx >= max) {
                maskx = max;
            }
            //y坐标同上方解释同理
            if (masky <= 0) {
                masky = 0
            } else if (masky >= max) {
                masky = max;
            }

            // 将判断完的mask的xy坐标赋值给mask的上左边距
            mask.style.left = maskx + "px"
            mask.style.top = masky + "px"


            //大图跟着滚动
            //大图片最大可移动距离，解释同max的一样
            var imgs = datu.offsetWidth - p.offsetWidth
            // 由1/2=x/4可得x=1*4/2    所以大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
            var bigx = maskx * imgs / max
            var bigy = masky * imgs / max

            //得到大图片移动距离，然后赋值给p标签上，让p标签处于小图的移动事件内，在小图移动，大图片跟着动
            p.style.left = bigx + "px"
            p.style.top = bigy + "px"
        })
    </script>

</body>

</html>