案例：仿京东放大镜 html js 小案例

最新推荐文章于 2022-08-22 16:35:50 发布

初辰ge

最新推荐文章于 2022-08-22 16:35:50 发布

阅读量1.2k

点赞数 2

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/chuenst/article/details/110951954

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

案例：仿京东放大镜

具体效果如图下，左边半透明小遮罩是放大镜，右边显示效果
在这里插入图片描述

案例分析：

整个案例可以分为三个功能模块
鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
黄色的遮挡层跟随鼠标功能
移动黄色遮挡层，大图片跟随移动功能

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 20px;
        }
        .product {
            position: relative;
            width: 250px;
            height: 250px;
            border: 1px solid #000;
        }
        .preview_img{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .preview_img img {
            width: 200px;
            height: 200px;
            margin: 25px;
        }
        .mask {
            position: absolute;
            display: none;
            top: 220px;
            left: 30px;
            width: 90px;
            height: 90px;
            background-color: #eee;
            border:2px solid #999;
            box-shadow: 0 0 20px 5px ;
            border-radius: 5px;
            opacity: 0.3;
            cursor: move;
        }
        .big {
            position: absolute;
            display: none;
            left: 410px;
            top: 0;
            width: 300px;
            height: 300px;
            z-index: 999;
            overflow: hidden;
            border: 2px solid #999;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="product">
        <div class="preview_img">
            <img src="https://profile.csdnimg.cn/B/4/9/2_chuenst" alt="" />
            <div class="mask"></div>
            <div class="big">
                <img src="https://profile.csdnimg.cn/B/4/9/2_chuenst" alt="" class="bigImg" />
            </div>
        </div>
    </div>
</div>
<script>
    //页面预加载
    window.addEventListener("load", function () {
        var preview_img = document.querySelector(".preview_img");
        var mask = document.querySelector(".mask");
        var big = document.querySelector(".big");
        //1.鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
        preview_img.addEventListener("mouseover", function () {
            mask.style.display = "block";
            big.style.display = "block";
        });
        preview_img.addEventListener("mouseout", function () {
            mask.style.display = "none";
            big.style.display = "none";
        });
        //把鼠标坐标给遮挡层是不合适的，因为遮挡层坐标以父盒子为准
        preview_img.addEventListener("mousemove", function (e) {
            //（1）先计算出鼠标在盒子内的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //（2）减去盒子高度宽度的一半
            //（3）mask 移动的距离
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            //(4)如果坐标小于0 就让他停在 0 的位置(即超出盒子范围就停止)
            var egdeX = preview_img.offsetWidth - mask.offsetWidth;
            var egdeY = preview_img.offsetHeight - mask.offsetHeight;
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= egdeX) {
                maskX = egdeX;
            }
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= egdeY) {
                maskY = egdeY;
            }
            mask.style.left = maskX + "px";
            mask.style.top = maskY + "px";
            //大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层的最大移动距离
            var bigImg = document.querySelector(".bigImg");
            //大图片最大移动距离
            var bigMax = bigImg.offsetWidth - big.offsetWidth;
            //大图片的移动距离 x y
            var bigX = (maskX * bigMax) / egdeX;
            var bigY = (maskY * bigMax) / egdeY;
            bigImg.style.left = -1.18*bigX + "px";
            bigImg.style.top = -1.18*bigY + "px";
        });
    });
</script>
</body>
</html>