案例：仿京东淘宝商品放大镜

玉安_ZhangDe

已于 2022-05-12 23:54:58 修改

阅读量320

点赞数 1

分类专栏： # JS练习案例文章标签： html 前端 javascript html5 css3

于 2022-05-12 23:44:18 首次发布

本文链接：https://blog.csdn.net/qq_47373340/article/details/124742392

版权

JS练习案例专栏收录该内容

11 篇文章 2 订阅

订阅专栏

效果图：

项目需求：

使鼠标移动到商品图上，有一层遮罩显示范围，并将其显示的范围放大显示到右侧

主要涉及到的知识：

1、获取元素

2、注册事件

3、鼠标监听事件 mousemove、mouseover、mouseout

4、通过获取元素修改css样式

5、获取鼠标在页面的坐标（e.pageX,e.pageY）

6、获取子元素在有相对定位（relative）里的偏移量 xxx.offsetLeft xxx.offsetTop

用到的素材

代码：

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            position: relative;
            width: 1200px;
            margin: 100px auto;
        }
        .small_box {
            width: 450px;
            height: 450px;
            border: 1px solid #000;
            cursor: move;
        }
        .max_box {
            position: absolute;
            display: none;
            top: 0px;
            left: 452px;
            width: 540px;
            height: 540px;
            background-color: #ccc;
            border: 1px solid #000;
            overflow: hidden;
        }
        .mask {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background: rgba(0,0,0,.2);
        }
        .big_img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="small_box">
            <img src="img/small.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="max_box">
            <img src="img/big.jpg" alt="" class="big_img">
        </div>
    </div>

    <script>
        // 1、获取元素
        var box = document.querySelector('.box');
        var smallBox = document.querySelector('.small_box');
        var mask = document.querySelector('.mask');
        var maxBox = document.querySelector('.max_box');
        var bigImg = document.querySelector('.big_img');

        // 2、鼠标经过小盒子 显示mask 显示大盒子
        smallBox.addEventListener('mouseover',function(){
            // console.log(10086);
            mask.style.display = 'block';
            maxBox.style.display = 'block';

        })
        // 3、鼠标移出小盒子，mask 和 大盒子都消失
        smallBox.addEventListener('mouseout',function(){
            mask.style.display = 'none';
            maxBox.style.display = 'none';
        })
        // 4、鼠标在小盒子内移动的时候
        // （1）获取鼠标在盒子里面的坐标  = 鼠标在页面上的坐标 - 总盒子在父元素（有相对定位）内的偏移量
        smallBox.addEventListener('mousemove',function(e){
            var x = e.pageX - box.offsetLeft;
            // console.log(x);
            var y = e.pageY - box.offsetTop;
         // (2)显示mask，鼠标在mask中间，且不会超出小盒子的范围
        //  mask中心坐标 = 鼠标在盒子里面的坐标 - mask的大小/2 
        // mask的大小 宽：mask.offsetWidth 高: mask.offsetHight
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            console.log(maskX+','+maskY);
        // （3）因为盒子是正方形，垂直和水平方向 盒子和 mask的最大差距一样
            var maskMax = smallBox.offsetWidth - mask.offsetWidth;
            // （4）1 当鼠标距离小盒子右边框大于 mask和小盒子之间的最大差距
            if (maskX > maskMax) {
                // 让他俩相等，就不会从右边溢出
                maskX = maskMax;
                // （4）2 当鼠标距离小盒子左边框大于 mask和小盒子之间的最大差距
            } else if(maskX <= 0) {
                // 让maskX = 0 不会从小盒子左边溢出
                maskX = 0;
            }
             // （5）1 当鼠标距离小盒子下边框大于 mask和小盒子之间的最大差距
            if (maskY > maskMax){
                 // 让他俩相等，就不会从下边溢出
                maskY = maskMax
             // （4）2 当鼠标距离小盒子上边框大于 mask和小盒子之间的最大差距
            } else if (maskY <= 0) {
                // 让maskY = 0 不会从小盒子左边溢出
                maskY = 0;
            }

            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px'
            // 5、大图片的预览效果跟随mask的显示范围
            // 大图片的移动距离 = mask坐标 * （大图片最大的移动距离=大图片的大小 - 大盒子预览框的大小） / mask和小盒子的最大差距
            var maxBoxMax = bigImg.offsetWidth - maxBox.offsetWidth;
            var maxBoxMoveX = maskX * maxBoxMax / maskMax;
            var maxBoxMoveY = maskY * maxBoxMax / maskMax;
            // 拖拽大图片显示到大盒子里面（大图片的尺寸>大盒子）
            bigImg.style.left = -maxBoxMoveX + 'px';
            bigImg.style.top = -maxBoxMoveY + 'px';
        })
       

    </script>
</body>
</html>

玉安_ZhangDe

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
案例：仿京东淘宝商品放大镜

效果图：项目需求：使鼠标移动到商品图上，有一层遮罩显示范围，并将其显示的范围放大显示到右侧主要涉及到的知识：1、获取元素2、注册事件3、鼠标监听事件 mousemove、mouseover、mouseout4、通过获取元素修改css样式5、获取鼠标在页面的坐标（e.pageX,e.pageY）6、获取子元素在有相对定位（relative）里的偏移量 xxx.offsetLeft xxx.offsetTop用到的素材代码：<!..
复制链接

扫一扫

专栏目录