javascript原生防京东放大镜

最新推荐文章于 2024-03-21 17:08:35 发布

汪金威

最新推荐文章于 2024-03-21 17:08:35 发布

阅读量99

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/csdnwangjinwei/article/details/129272963

版权

<!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>
    <style>
        /* CSS布局步骤 */
        /* 1. 根据效果写成HTML结构 */
        /* 2. 写页面初始化样式(清除所有标签的内外边距等) */
        /* 3. 写具体盒子的样式(大盒子=>小盒子 , 上盒子=>下盒子 左盒子=> 右盒子 ) */

        * {
            margin: 0;
            padding: 0;
        }


        img {
            /* 去掉图片底部缝隙 */
            vertical-align: bottom;
        }

        li {
            /* 去掉列表项目符号 */
            list-style: none;
        }

        /* 清除浮动类 */
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .box {
            width: 1000px;
            margin-top: 100px;
            margin-left: 360px;
        }

        .box .box-left {
            width: 450px;
            height: 450px;
            border: 2px solid #eeeeee;
            position: relative;
        }

        .box .box-left .mask {
            width: 300px;
            height: 300px;
            background: yellow;
            opacity: 0.4;
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            /* 隐藏元素 */
            display: none;
        }

        .box .box-left .small-box {
            margin-top: 20px;
            display: flex;
            justify-content: space-evenly;
        }

        .box .box-left .small-box li img {
            border: 2px solid transparent;
            cursor: pointer;
        }

        .box .box-left .small-box li img.active {
            border-color: #e4393c;
        }

        .box .box-right {
            width: 540px;
            height: 540px;
            border: 2px solid #eeeeee;
            float: left;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 隐藏元素 */
            display: none;
            position: relative;
        }

        .box .box-right .big-img {
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <!-- 大盒子 -->
    <div class="box clearfix">
        <!-- 左部分 -->
        <div class="box-left fl">
            <!-- 左上部分 -->
            <div class="middle-box">
                <!-- 中图 -->
                <img src="./images/1_middle.jpg" class="middle-img" />
                <!-- 遮罩层 -->
                <div class="mask"></div>
            </div>

            <!-- 左下部分 -->
            <ul class="small-box">
                <li><img src="./images/1_small.jpg" class="active" /></li>
                <li><img src="./images/2_small.jpg" /></li>
                <li><img src="./images/3_small.jpg" /></li>
                <li><img src="./images/4_small.jpg" /></li>
                <li><img src="./images/5_small.jpg" /></li>
                <li><img src="./images/6_small.jpg" /></li>
            </ul>
        </div>

        <!-- 右部分 -->
        <div class="box-right fl">
            <img src="./images/1_big.jpg" class="big-img" />
        </div>
    </div>

    <script>
        // 封装一个获取DOM对象的函数
        function $(cssSeletor) {
            var dom = document.querySelectorAll(cssSeletor);
            if (dom.length === 0) {
                return null;
            }

            if (dom.length === 1) {
                return dom[0];
            }

            return dom;
        }

        // 获取相关DOM对象
        var box = $(".box");
        var middleBox = $(".middle-box");
        var mask = $(".mask");
        var boxRight = $(".box-right");
        var bigImg = $(".big-img");
        var middleImg = $(".middle-img");
        var smallBox = $(".small-box");

        // 目标
        // 1. 鼠标移上.middle-box层的时候,显示.mask以及.box-right层
        // 2. 鼠标移出.middle-box层的时候,隐藏.mask以及.box-right层
        // 3. 遮罩层可以在.middle-box层中跟随鼠标移动,并且鼠标显示在遮罩层的中间, 遮罩层移动不能出出.middle-box层的边界
        // 4. 遮罩层移动的时候, .box-right里面的.big-img大图也需要跟着反向移动
        // 5. 切换图片功能

        // 鼠标移上事件
        middleBox.onmouseover = function () {
            mask.style.display = "block";
            boxRight.style.display = "block";
        }

        // 鼠标移出事件
        middleBox.onmouseout = function () {
            mask.style.display = "none";
            boxRight.style.display = "none";
        }


        // 获取.box的左外边距和上外边距
        var boxOffLeft = box.offsetLeft;
        var boxOffTop = box.offsetTop;

        // 鼠标移动事件
        middleBox.onmousemove = function (e) {
            // 获取.middle-box的宽度
            var middleBoxW = middleBox.offsetWidth;
            // 获取.middle-box的高度
            var middleBoxH = middleBox.offsetHeight;

            // 获取遮罩层的宽度
            var maskW = mask.offsetWidth;
            // 获取遮罩层的高度
            var maskH = mask.offsetHeight;

            // 获取鼠标在.middleBox盒子内的坐标位置 offsetX和offsetY可能会出现闪烁问题
            // console.log(e.offsetX, e.offsetY);
            // mask.style.top = e.offsetY + "px";
            // mask.style.left = e.offsetX + "px";

            // 获取鼠标在.middleBox盒子内的坐标位置
            var maskX = e.pageX - boxOffLeft;
            var maskY = e.pageY - boxOffTop;

            // 鼠标移动到盒子的中间
            maskX = maskX - maskW / 2;
            maskY = maskY - maskH / 2;

            // 遮罩层left最大值
            var maskMaxLeft = middleBoxW - maskW;
            // 遮罩层top最大值
            var maskMaxTop = middleBoxH - maskH;

            if (maskX < 0) { // 左边界
                maskX = 0;
            } else if (maskX > maskMaxLeft) { // 右边界
                maskX = maskMaxLeft;
            }

            if (maskY < 0) { // 上边界
                maskY = 0;
            } else if (maskY > maskMaxTop) { // 下边界
                maskY = maskMaxTop;
            }

            // 设置.mask的left样式属性
            mask.style.left = maskX + "px";
            // 设置.mask的top样式属性
            mask.style.top = maskY + "px";


            /* 
                遮罩层当前移动距离      大图片当前移动距离?
                __________________ = ___________________
                遮罩层最大移动距离      大图片最大移动距离
            */

            // 大图片最大移动left值
            var bigImgMaxLeft = bigImg.offsetWidth - boxRight.clientWidth;
            // 大图片最大移动top值
            var bigImgMaxTop = bigImg.offsetHeight - boxRight.clientHeight;

            // 大图片当前移动left值
            var bigX = (maskX * bigImgMaxLeft) / maskMaxLeft;
            // 大图片当前移动top值
            var bigY = (maskY * bigImgMaxTop) / maskMaxTop;

            // 设置大图片的left值
            bigImg.style.left = -bigX + "px";
            // 设置大图片的top值
            bigImg.style.top = -bigY + "px";
        }

        smallBox.onmouseover = function (e) {
            if (e.target.nodeName === "IMG") {
                console.log(e.target);
                // 排他
                for (var i = 0; i < smallBox.children.length; i++) {
                    smallBox.children[i].firstElementChild.classList.remove("active");
                }
                // 设置高亮
                e.target.classList.add("active");

                // 设置中图图片
                middleImg.src = e.target.src.replace("small", "middle");

                // 设置大图图片
                bigImg.src = e.target.src.replace("small", "big");
            }
        }
    </script>
</body>

</html>

汪金威

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript原生防京东放大镜

思路： 1. 鼠标移上.middle-box层的时候,显示.mask以及.box-right层 2. 鼠标移出.middle-box层的时候,隐藏.mask以及.box-right层 3. 遮罩层可以在.middle-box层中跟随鼠标移动,并且鼠标显示在遮罩层的中间, 遮罩层移动不能出出.middle-box层的边界 4. 遮罩层移动的时候, .box-right里面的.big-img大图也需要跟着反向移动
复制链接

扫一扫