JavaScript实现小人儿跟随鼠标效果

Hello_my_new_world

于 2019-08-08 23:40:44 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：日常练习--前端小效果文章标签： JavaScript mousemove clientX clientY

本文链接：https://blog.youkuaiyun.com/start_XUEBA/article/details/98897244

日常练习--前端小效果专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用JavaScript实现一个简单的鼠标跟踪效果，使页面上的小人图片跟随鼠标移动。通过绝对定位和监听mousemove事件，获取鼠标位置并更新图片的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

练手：JavaScript实现小人儿跟随鼠标小效果。

小人儿图片（随意图片）：

分析：

1、图片应该使用绝对定位。

2、需要用到 mousemove 鼠标事件。

3、需要得到鼠标相对于浏览器窗口可视区的 X 和 Y 坐标来改变图片位置坐标，使用——clientX，clientY。

html:

 <img src="./images/timg.gif" id="moveGif">

css：

 #moveGif{
       position: absolute;
   }

JavaScript：

document.addEventListener('mousemove',function(e){
        var x=e.clientX;
        var y=e.clientY;
        var img=document.getElementById("moveGif")
        img.style.left=x+'px';
        img.style.top=y+'px';
    })