小球随鼠标移动

最新推荐文章于 2023-12-02 14:54:13 发布

sunlizhen

最新推荐文章于 2023-12-02 14:54:13 发布

阅读量608

点赞数

分类专栏： JS类文章标签： js 小球随鼠标移动

本文链接：https://blog.csdn.net/sunlizhen/article/details/77196953

版权

这篇博客介绍了如何利用JavaScript实现一个小球跟随鼠标移动的效果。通过监听鼠标按下、移动和抬起事件，计算鼠标位置与小球初始位置的偏移量，动态调整小球的left和top属性，确保小球在页面内移动且不超过边界。同时，设置了鼠标按下时改变光标样式，鼠标抬起时恢复默认样式。

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

html:
<div id="box"></div>
css:
div{
width:150px;
height:150px;
background:green;
border-radius:50%;
position:absolute;
}
js:
window.onload = function(){
/*
分析：
有三个事件；
1.鼠标按下事件；
分析：鼠标按下的时候，点击的点与圆圈的边缘的距离是固定不变的，因为圆球随鼠标移动的时候，点不动，只是圆球移动所以我们在鼠标按下的时候获取这段距离就可以得到left的距离了
1.获取鼠标的e.clientX和e.clientY的值；
2.offsetX = e.clientX-this.offsetLeft;
offsetY = e.clientY-this.offsetTop;
3.因为考虑到鼠标抬起的时候，按下的不会被关闭 var isDown = false;
2.鼠标移动事件；
1.鼠标移动的时候改变的有e.clientX和
2.我们要求的就是left的距离 = e.client- offsetX；
3.还要判断不能超过左右上下