仿京东放大镜效果

最新推荐文章于 2024-06-28 20:15:14 发布

bsf000000___

最新推荐文章于 2024-06-28 20:15:14 发布

阅读量81

点赞数

文章标签：前端 javascript html css css3

本文链接：https://blog.csdn.net/bsf000000___/article/details/131997474

版权

仿京东放大镜效果

这是一个简单的图片放大镜效果的网页代码。通过鼠标移动，可以在父容器内显示一个遮挡层和一个放大的图片区域，实现了图片放大和鼠标跟随效果。

该页面使用了HTML、CSS和JavaScript来实现。其中，HTML部分定义了一个父容器（class=“father”）和两个子元素（class="mask"和class=“big_mask”），通过CSS来设置它们的样式。JavaScript部分则负责监听鼠标事件，并计算遮挡层和放大图片的位置，实现图片放大和鼠标跟随效果。

需要注意的是，该代码中引用了两个图片文件（“flame-girl1.jpg”），你需要将这两个图片文件放在合适的路径下，并在代码中正确引用。同时，如果需要修改图片大小或其他样式，请在CSS部分进行相应的调整。

<!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>
        .father {
            width: 400px;
            height: 400px;
            /* border: 2px solid grey; */
            text-align: center;
            position: relative;
        }

        .father img {
            width: 400px;
            height: 400px;
            /* margin-top: 50px; */
        }
        .mask {
            width: 300px;
            height: 300px;
            background-color: #FEDE4F;
            position: absolute;
            top: 0;
            left: 0;
            opacity: .5;
            border: 1px solid #ccc;
            cursor: move;
            display: none;
            cursor: move;
        }

        .big_mask {
            width: 500px;
            height: 500px;
            position: absolute;
            left: 450px;
            top: 0;
            background-color: pink;
            /* background-image: url(./images/flame-girl1.jpg);
            background-size: contain;
            background-repeat: no-repeat;
            display: none; */
            display: none;
            overflow: hidden;
            z-index: 999;
        }

        .big_mask img {
            height: 700px;
            width: 700px;
            margin-top: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <img src="./images/flame-girl1.jpg" alt="" class="bigImage">
        <div class="mask"></div>
        <div class="big_mask">
            <img src="./images/flame-girl1.jpg" alt="" class="most">
        </div>
    </div>
    <script>
        window.addEventListener('load', function () {
            var mask = document.querySelector('.mask')
            var bigMask = document.querySelector('.big_mask')
            var bigImg = document.querySelector('.father')
            bigImg.addEventListener('mouseover', function () {
                mask.style.display = 'block'
                bigMask.style.display = 'block'
            })
            bigImg.addEventListener('mouseout', function () {
                mask.style.display = 'none'
                bigMask.style.display = 'none'
            })
            // 鼠标移动的时候，让黄色的盒子跟着鼠标来走
            bigImg.addEventListener('mousemove', function (e) {
                //先计算出鼠标在盒子内的坐标

                var x = e.pageX - this.offsetLeft
                var y = e.pageY - this.offsetTop
                //console.log(x,y)
                //减去盒子高度的一半
                var maskX = x - mask.offsetWidth / 2
                var maskY = y - mask.offsetHeight / 2

                //如果x坐标小于0，将其赋值为0
                //如果y坐标小于0，将其赋值为0
                var maskMax = bigImg.offsetHeight - mask.offsetHeight
                if (maskX <= 0) {
                    maskX = 0
                }
                else if (maskX >= maskMax) {
                    maskX = maskMax
                }

                if (maskY <= 0) {
                    maskY = 0
                } else if (maskY >= maskMax) {
                    maskY = maskMax
                }
                mask.style.left = maskX + 'px'
                mask.style.top = maskY + 'px'
                //大图片的移动距离=遮挡层距离*大图片最大距离/遮挡层的最大移动距离
                //大图片最大移动距离
                var most = document.querySelector('.most')
                var bigMax = most.offsetWidth - bigMask.offsetWidth
                //大图片的移动距离X Y
                var bigX = maskX * bigMax / maskMax
                var bigY = maskY * bigMax / maskMax
                most.style.left = -bigX + 'px'
                most.style.top = -bigY + 'px'
            })
        })
    </script>
</body>
</html>

上述代码通过添加事件监听器来实现对父容器（class=“father”）的鼠标移入、移出和移动事件的处理。具体解释如下：

window.addEventListener('load', function () { ... }): 当页面加载完成后，执行匿名函数中的代码。
var mask = document.querySelector('.mask'): 获取class为"mask"的元素，即遮挡层。
var bigMask = document.querySelector('.big_mask'): 获取class为"big_mask"的元素，即放大图片区域。
var bigImg = document.querySelector('.father'): 获取class为"father"的元素，即父容器。
bigImg.addEventListener('mouseover', function () { ... }): 给父容器添加鼠标移入事件监听器，当鼠标移入父容器时执行匿名函数中的代码。
mask.style.display = 'block'、bigMask.style.display = 'block': 显示遮挡层和放大图片区域，将它们的display属性设置为"block"。
bigImg.addEventListener('mouseout', function () { ... }): 给父容器添加鼠标移出事件监听器，当鼠标移出父容器时执行匿名函数中的代码。
mask.style.display = 'none'、bigMask.style.display = 'none': 隐藏遮挡层和放大图片区域，将它们的display属性设置为"none"。
bigImg.addEventListener('mousemove', function (e) { ... }): 给父容器添加鼠标移动事件监听器，当鼠标在父容器内移动时执行匿名函数中的代码。
e.pageX - this.offsetLeft、e.pageY - this.offsetTop: 获取鼠标在父容器内的坐标，减去父容器的偏移量，得到相对于父容器的坐标。
maskX、maskY: 计算遮挡层的位置，即遮挡层的左上角相对于父容器的坐标。
maskMax: 遮挡层的最大移动范围，等于父容器的高度减去遮挡层的高度。
maskX <= 0、maskX >= maskMax、maskY <= 0、maskY >= maskMax: 限制遮挡层的移动范围在父容器内。
mask.style.left = maskX + 'px'、mask.style.top = maskY + 'px': 设置遮挡层的left和top样式，实现遮挡层随鼠标移动。
most.offsetWidth - bigMask.offsetWidth: 放大图片在放大区域内的最大移动范围，等于放大图片的宽度减去放大区域的宽度。
bigX、bigY: 计算放大图片的位置，即放大图片在放大区域内的左上角相对于放大区域的坐标。
most.style.left = -bigX + 'px'、most.style.top = -bigY + 'px': 设置放大图片的left和top样式，实现放大图片的移动。

通过以上代码，当鼠标移入父容器时，会显示遮挡层和放大图片区域；当鼠标在父容器内移动时，会计算遮挡层和放大图片的位置，从而实现放大镜效果。当鼠标移出父容器时，隐藏遮挡层和放大图片区域。

效果图

在这里插入图片描述

bsf000000___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿京东放大镜效果

JavaScript部分则负责监听鼠标事件，并计算遮挡层和放大图片的位置，实现图片放大和鼠标跟随效果。需要注意的是，该代码中引用了两个图片文件（“flame-girl1.jpg”），你需要将这两个图片文件放在合适的路径下，并在代码中正确引用。当鼠标在父容器内移动时，会计算遮挡层和放大图片的位置，从而实现放大镜效果。通过鼠标移动，可以在父容器内显示一个遮挡层和一个放大的图片区域，实现了图片放大和鼠标跟随效果。//大图片的移动距离=遮挡层距离*大图片最大距离/遮挡层的最大移动距离。//大图片的移动距离X Y。
复制链接

扫一扫