js实现图片跟随鼠标移动

最新推荐文章于 2023-09-08 18:50:39 发布

黄大仙No.1

最新推荐文章于 2023-09-08 18:50:39 发布

阅读量7.1k

点赞数 5

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107861592

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

鼠标不断移动,使用鼠标移动事件:mousemove
在页面中移动:给document注册事件
图片要移动距离,而且不占位置,使用绝对定位
核心原理:每次鼠标移动,我们都会获得最新的坐标,把这个坐标作为图片的left和top
- 跟随鼠标移动的天使

<!--
鼠标不断移动,使用鼠标移动事件:mousemove
在页面中移动:给document注册事件
图片要移动距离,而且不占位置,使用绝对定位
核心原理:每次鼠标移动,我们都会获得最新的坐标,把这个坐标作为图片的left和top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 1000px;
        }

        img {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="小天使.gif" alt="">
<script>
    document.addEventListener('mousemove', function (e) {
        //鼠标只要移动,就会触发事件
        var x = e.pageX;
        var y = e.pageY;
        var pic = document.querySelector('img');
        pic.style.left = x-80+'px';
        pic.style.top = y-120+'px';
    })
</script>
</body>
</html>