原生JS实现圆周运动

最新推荐文章于 2023-07-05 20:39:17 发布

转载最新推荐文章于 2023-07-05 20:39:17 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ypengbk/p/javascript.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的鼠标跟随效果实现方案，使用HTML与JavaScript创建一个红色球体元素，并使其随鼠标移动而变化位置。

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

<body>
<div id="ball" style="width:20px; height:20px; background:red; border-radius:50%; position:absolute; left:0; top:80px;"></div>
<script>
var ball = document.getElementById("ball");
var radian = 0.1;
var x = 0;
var y = 0;
document.onmousemove = function(e){
e = e || event;
x = e.clientX;
y = e.clientY;
}
var timer1 = setInterval(function(){
ball.style.left = x + Math.cos(radian) * 80 + "px";
ball.style.top = y + Math.sin(radian) * 80 + "px";
radian+=0.1;
},20);
</script>
</body>