js运动中，能不能说说一组图片做圆环运动队原理，最好能有公式讲解，谢谢！！打个比方像下面的图。。。。
2个回答
展开全部
简单的说就是计算出一圈圆周点集作为路径，然后通过修改元素的left和top来使他移动，感觉就像是在做圆周运动。希望有帮到你。
样例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js曲线</title>
<style type="text/css">
#d2{background: none repeat scroll 0 0 #FF3300;
border-radius: 78.5px 78.5px 78.5px 78.5px;
color: #FFFFFF; padding:44px 50px;
position: absolute;
}
#d1{position:absolute;width:100px;height:100px;background:red;left:0px;}
.point{position:absolute;width:1px;height:1px; background:red;}
</style>
<script type="text/javascript">
var array = new Array();
function circle(a,b,r){
for(var times=0; times<720; times++) {
var hudu = (2*Math.PI / 360) * 1 * times;
var X = a + Math.sin(hudu) * r;
var Y = b - Math.cos(hudu) * r
var point = document.createElement('div');
document.body.appendChild(point);
point.className = 'point';
point.style.top = Y +'px';
point.style.left = X + 'px';
array[times] = point;
}
}
function moveCircle(){
var t = 0 ;
var speed = 1;
var a = 4/1000;
var b = -3;
var c = 600;
var i = 0;
var d = document.getElementById('d2');
var w = d.offsetWidth;
var h = d.offsetHeight;
var timer=setInterval(function(){
d.style.left = array[i].offsetLeft -w/2+'px';
d.style.top = array[i].offsetTop -h/2+'px';
i++;
if(i >= array.length){
i = 0;
}
},speed);
}
window.onload = function(){
circle(600,400,200);
moveCircle();
}
</script>
</head>
<body>
<div id="d2"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var a=math.sin()
var b=math.cos()
这个是根据角度(1-360度) 在计算 a,b 的坐标,你看下 x轴y轴
x=sin( 角度)
y=sin(角度) ,角度 取值范围 是[0,360)
如果想让div动起来 就需要 角度 递增了,计算 并赋值 top和left了,
就是这个原理,然后根据这个算出来 div 的left top之即可,当然得有一个绝对(或相对)定位的属性了
var b=math.cos()
这个是根据角度(1-360度) 在计算 a,b 的坐标,你看下 x轴y轴
x=sin( 角度)
y=sin(角度) ,角度 取值范围 是[0,360)
如果想让div动起来 就需要 角度 递增了,计算 并赋值 top和left了,
就是这个原理,然后根据这个算出来 div 的left top之即可,当然得有一个绝对(或相对)定位的属性了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
