原生js如何做一个圆周运动，类似于地球朝着太阳转的效果

最新推荐文章于 2024-07-25 19:32:28 发布

田江

最新推荐文章于 2024-07-25 19:32:28 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript从入门到精通文章标签： javascript web前端开发 web应用 web开发

本文链接：https://blog.csdn.net/jiang7701037/article/details/78927880

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 80 订阅

订阅专栏

示意图：

效果图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0; 
padding:0;
list-style: none
}
#ball{
position:absolute;
left:295px;
top:95px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
#centerDiv{
position:absolute;
left:100px;
top:100px;
width:400px;
height:400px;
border-radius:50%;
background-color:red;
}

</style>
</head>
<body  style="height:1000px;">
<input id="btn" type="button" value="动起来" />
<div id="centerDiv">

</div>
<div id="ball">

</div>
</body>
</html>


<script type="text/javascript" src="tools/util.js"></script>
<script type="text/javascript">
window.onload = function(){
$("btn").onclick = function(){
//1、圆心点  （300,300）
//2、半径（200）r
//3、起始位置（300,100） initLeft,intiTop
//4、假定度数为 angle;
    //那么此时的：
//currLeft = 起始位置(initLeft)+r*sin(angle)
//currTop =  起始位置(initTop)+(r-r*cos(angle));

//起始位置
let initLeft = 300;
let initTop = 100;
//半径
let r = 200;
//起始度数(角度)
let angle =0;

let myTimer = setInterval(function(){
angle++;//增加度数
//1、改变left和top的值（javascript中的数据）；
let currLeft= initLeft+r*Math.sin(angle/180*Math.PI);//角度要转成弧度
let currTop = initTop+(r-r*Math.cos(angle/180*Math.PI));//角度要转成弧度

//3、改变外观（UI）
$("ball").style.left = (currLeft-5)+"px";
$("ball").style.top = (currTop-5)+"px";
},20);
}
}

</script>

田江

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js如何做一个圆周运动，类似于地球朝着太阳转的效果

示意图：效果图：*{margin:0; padding:0;list-style: none}#ball{position:absolute;left:295px;top:95px;width:10px;height:10px;border-radius:50%;background-color:black;}#cente
复制链接

扫一扫

专栏目录