<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
<style type="text/css">
* {
margin: 0; padding: 0;
}
html,body {
height: 100%; overflow: hidden;
}
.box {
position: absolute;
left:0; top:0;
width: 20px; height: 20px; background: darkcyan;
border-radius: 50%;
}
.lineX {
position: absolute;
left:0; right: 0; top: 434px;
height: 1px; background: black;
}
.lineY {
position: absolute;
top:0; bottom: 0; left: 800px;
width: 1px; background: black;
}
</style>
<script>
window.onload=function(){
var boxs=document.getElementsByClassName("box");
var rad1=200;//y方向的半径
var rad2=500;//x方向的半径
for(var i=0;i<boxs.length;i++){
boxs[i].degree=i*90;//设置初始target值
//闭包函数 使i成为局部变量
(function(i){
setInterval(function(){
var x=Math.cos(boxs[i].degree*(Math.PI/180));
var y=Math.sin(boxs[i].degree*(Math.PI/180));
boxs[i].style.left=rad2*x+740+"px";
boxs[i].style.top=rad1*y+375+"px";
boxs[i].style.width=boxs[i].style.height=(rad1*y+424)*0.3+"px";
boxs[i].degree+=3;
},30)
})(i);
}
}
</script>
</head>
<body>
<div class="box"></div>
<div class="box" style="background:red"></div>
<div class="box" style="background:black"></div>
<div class="box" style="background:yellow"></div>
<div class="lineX">
</div>
<div class="lineY">
</div>
</body>
</html>
946
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
