案例图片跟随鼠标

最新推荐文章于 2024-06-07 23:26:45 发布

hy_3504965117

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量55

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/hy_3504965117/article/details/124729456

版权

 <title>案例分析：图片跟随鼠标</title>
    <style>
        img {
            position: absolute;
          
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <img src="第三章/images/猫.jpg" alt="">
    <script>
        // 1. 获取元素
        let pic = document.querySelector('img');


        document.addEventListener('mousemove', function(e) {
            let x = e.pageX;
            let y = e.pageY;
            pic.style.top = x - 80 / 2 + 'px';
            pic.style.left = y - 96 / 2 + 'px';
        })
    </script>
</body>

</html>

案例分析：图片跟随鼠标

hy_3504965117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例图片跟随鼠标

<title>案例分析：跟随鼠标的天使</title> <style> img { position: absolute; top: 0px; left: 0px; } </style></head><body> <img src="第三章/images/猫.jpg" al..
复制链接

扫一扫