JS代码——实现气球跟随鼠标移动

一、代码区域

1.css样式

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
        }
    </style>

2.在页面放置一个容器

<div class="box"></div>

3.Javascript 代码

// 1)获取盒子
        var box = document.querySelector(".box");

        // 2)绑定鼠标移动事件
        document.onmousemove = function (e) {
            // 获取鼠标在页面上的位置
            var pageX = e.pageX;
            var pageY = e.pageY;

            // 设置盒子附近的取值范围
            var x = pageX - (100 / 2);
            var y = pageY - (100 / 2);

            // 设置盒子当前位置
            box.style.left = x + "px";
            box.style.top = y + "px";
        }

个人总结：

        该功能的实现主要需要用户掌握css中一些基本样式，鼠标移动事件（mousemove）以及了解如何通过 Javascript代码实现对容器样式的控制。

---

注： 博主每天记录自己所学，如有写的不好之处，希望您能不吝赐教，给我一些关于这个项目的意见和建议。各位的宝贵意见将对我产生深远的影响，我将认真倾听并尽力改进。当然也请各位动动您的手指，点点赞。（｡◕ˇ∀ˇ◕）谢谢各位~~