js样式实现鼠标点击事件图片放大跟随鼠标

最新推荐文章于 2024-08-21 23:57:05 发布

z...Z

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量485

点赞数 1

分类专栏： JS学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43706763/article/details/119522527

版权

JS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

鼠标实现图片放大跟随鼠标

    <style>
        .picture-list img {
            width: 300px;
            height: 80px;
        }

        .big-picture img {
            width: 600px;
            height: 160px;
        }

        .big-picture {
            position: absolute;
        }
    </style>
</head>
<!-- 图片大图显示 -->
<body>
    <div class="picture-list">
        <img src="img/banner_1.jpg" alt="">
        <img src="img/banner_2.jpg" alt="">
        <img src="img/banner_3.jpg" alt="">
    </div>
    <div class="big-picture"></div>

    <script>
        // 获取对象节点进行操作
        let imglist = document.querySelectorAll(`.picture-list img`);
        let bigpic = document.querySelector(`.big-picture`);
        let picList = document.querySelector(`.picture-list`);
        // 数组遍历循环显示
        for (let i in imglist) {
            imglist[i].onmouseenter = function () {
                console.log(this.src);
                bigpic.innerHTML = `        <img src="${this.src}" alt="">`;
            }
            imglist[i].onmouseleave = function () {
                bigpic.innerHTML = ``;
            }
        }
        picList.onmousemove = function (e) {
            let x = e.clientX;
            let y = e.clientY;
            // 细节加像素距离，避免重复显示图片掉帧，变得更顺滑！
            console.log(`x坐标${x},y坐标${y}`);
            bigpic.style.top = y + 10 + "px";
            bigpic.style.left = x + 10 + "px";

        }
    </script>
</body>