仿京东的图片放大镜案例

最新推荐文章于 2022-06-02 16:35:52 发布

做一个程序员

最新推荐文章于 2022-06-02 16:35:52 发布

阅读量1.1k

点赞数

文章标签： html 前端 javascript css3

本文链接：https://blog.csdn.net/weixin_52153452/article/details/121750427

版权

本文详细介绍了如何使用JavaScript和CSS实现鼠标悬停小图时，右侧显示放大图片的效果，涉及事件监听、元素定位和图片缩放等前端基础知识。通过代码示例，展示了从页面加载到鼠标移出的完整交互流程，适合前端初学者学习和实践。

摘要由CSDN通过智能技术生成

一、目标实现效果

在左边的小图片上实现鼠标经过右边显示图片的放大图片

二、实现过程及其思路展示

1、给鼠标设置一个'mouseover'事件在鼠标经过的时候可以将遮罩层和右边的放大图片显示设置为块级显示（页面加载时这两个为none也就是隐藏的状态），再给鼠标设置一个'mouseout',在鼠标超出图片所在范围的时候再将上面的两个属性的display设置为none，再次隐藏起来。

2、鼠标添加'mousemove'事件，再鼠标移动的时候给遮罩层赋予一个坐标跟随鼠标的移动而移动，而且需要在此时给右边的被放大的盒子添加位置（但是左右两边的位移是相反的，需要特别注意，只需要给鼠标产生位移的距离添加'-'号就行了）。

3、实现的过程中还有很多的小细节，由于我不是大神，所以说不能面面俱到，所以直接上代码，可以在实践中寻找经验，体验代码之美。

代码如下：

1、js代码段，此处需要单独创建一个js文件，并且调用到html的head中（由于还是小白阶段，所以暂时没有写注释，有不懂的可以私信问我，虽然那我也不一定会哈哈哈哈）

window.addEventListener('load', function () {
    var mask = this.document.querySelector('.mask');
    var bigImg = this.document.querySelector('.big_img');
    var smallImg = this.document.querySelector('.small_img');
    var magnifier = this.document.querySelector('.magnifier');
    var imgLeft = this.document.querySelector('#small');
    var imgRight = this.document.querySelector('#big');

    magnifier.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        bigImg.style.display = 'block';
        smallImg.addEventListener('mousemove', function (e) {
            var x = e.pageX - smallImg.offsetLeft;
            var y = e.pageY - smallImg.offsetTop;
            var maskLeft = x - mask.offsetWidth / 2;
            var maskTop = y - mask.offsetHeight / 2;
            // 此处忘记给smallImg的源对象添加宽度和高度，导致遮罩层显示出现错误
            var ssTop = smallImg.offsetWidth - mask.offsetWidth;
            if (maskLeft <= 0) {
                mask.style.left = '0';
            }
            else {
                mask.style.left = maskLeft + 'px';
            }
            if (maskTop <= 0) {
                mask.style.top = '0';
            }
            else {
                mask.style.top = maskTop + 'px';
            }
            if (maskTop >= ssTop) {
                mask.style.top = ssTop + 'px';
            }
            if (maskLeft >= ssTop) {
                mask.style.left = ssTop + 'px';
            }
            // 定义一个倍数关系，联系到与被放大的图像
            var bb = imgRight.offsetWidth / imgLeft.offsetWidth;
            imgRight.style.top = -bb * maskTop + 'px';
            imgRight.style.left = -bb * maskLeft + 'px';
        });
    })
    magnifier.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        bigImg.style.display = 'none';
    })








})

2、html页面，由于html的页面较为简便，所以说是将css文件也写到了这里（同样没有注释哦）

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .magnifier {
            position: relative;
            height: 450px;
            width: 450px;
        }

        .small_img {
            position: absolute;
            height: inherit;
            width: inherit;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .mask {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            height: 300px;
            width: 300px;
            background-color: rgb(223, 223, 80);
            /* 设置盒子的透明度 */
            opacity: .5;
            cursor: move;
            z-index: 999;
        }

        .big_img {
            display: none;
            position: absolute;
            top: 0;
            left: 500px;
            height: 600px;
            width: 600px;
            overflow: hidden;
        }

        #small {
            position: absolute;
            top: 0;
            left: 0;
        }

        #big {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script src="js/7.3.js"></script>
</head>
<div class="magnifier">
    <div class="small_img">
        <div class="mask"></div>
        <img src="image/small.jpg" alt="" id="small">
    </div>
    <div class="big_img">
        <img src="image/big.jpg" alt="" id="big">
    </div>
</div>

<body>
</body>

</html>

3、用到的两张图片是在京东的官网上抠出来的（你们也可以去扒几张）