JS（DOM）—鼠标与图片同时移动

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

原创最新推荐文章于 2023-09-08 18:50:39 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML和JavaScript实现，让图片随着鼠标在网页上移动。通过监听鼠标移动事件，实时更新图片的位置，使其始终保持在鼠标光标附近。

需求：鼠标移动事件，鼠标在哪，图片在哪里。

代码展示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>       
        #img1 {
            position: absolute;
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        //强调：window对象在浏览器打开时，就被创建了
        //加载完成指：页面中的html都被加载了
        onload = function () {
            //鼠标移动：mousemove
            window.onmousemove = function (e) {
                //获取图片对象
                var img1 = document.getElementById('img1');
                //设置鼠标X坐标
                img1.style.left = e.clientX - parseInt(img1.width) / 2 + 'px';
                //设置鼠标y坐标
                img1.style.top = e.clientY - parseInt(img1.height) / 2 + 'px';
            };
        };
    </script>
</head>
<body>
    <img id="img1" src="images/star2.png" />
</body>
</html>

效果展示：