js圆周运动动画_JS代码实现圆周运动

js代码实现圆周运动

body{

margin: 0;

padding: 0;

}

#circle{

position: relative;

width: 300px;

height: 300px;

background: #f2f2f2;

border-radius: 50%;

}

#ball{

position: absolute;

width: 10px;

height: 10px;

margin-left: -5px;

margin-top: -5px;

background: red;

border-radius: 50%;

}

var ocircle = document.getelementbyid("circle");

var oball = document.getelementbyid("ball");

var r = ocircle.offsetwidth/2;

var angle = 0;

var timer = setinterval(function(){

angle++;

var hd = math.pi/180*angle;

var x = r*math.cos(hd);

var y = r*math.sin(hd);

oball.style.left =r+ x + "px";

oball.style.top =r- y + "px";

},30)

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！