HTML+CSS+JS案例展示(跟随鼠标移动的小人)

hacalili

已于 2024-02-18 14:59:19 修改

阅读量1.6k

点赞数 3

分类专栏： HTML+CSS+JS（案例展示）文章标签： javascript html css

于 2022-02-09 17:40:13 首次发布

本文链接：https://blog.csdn.net/weixin_42541725/article/details/122846427

版权

HTML+CSS+JS（案例展示）专栏收录该内容

46 篇文章 4 订阅

订阅专栏

该博客介绍了一个使用JavaScript实现的鼠标跟随动图效果。通过监听鼠标的移动事件，动态调整图片的位置，使得动图始终跟随鼠标移动。示例代码包括HTML、CSS和JavaScript部分，展示了基础的前端交互功能。

摘要由CSDN通过智能技术生成

参考来源：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

网页GitHub地址如下：（若加载较慢建议刷新后耐心等待一会~）

js_mousemove

主要功能：

鼠标移动时，动图小人会随着鼠标一起移动

网页代码如下：

HTMLHTML+CSS+JS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_mousemove</title>
    <style>
        img {
            position: absolute;
            width: 70px;
            top: 2px;
        }
    </style>
</head>
<body>
    <img src="pic.gif" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove',function(e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.left = x - 35 + 'px';
            img.style.top = y - 40 + 'px';
        })
    </script>
</body>
</html>