圆做圆周运动
微信图片_20180205231508.jpg
<style>
*{margin: 0;padding: 0;}
div{
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px solid #ddd;
}
div span{
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
</style>
<body>
<div>
<span></span>
</div>
<script>
var oSpan = document.getElementsByTagName( 'span' )[0],
sDeg = 90;
/*
思路：
计算出球的坐标（ x , y ）,通过设置left 跟 top 来确定位置
可以 定义一个sDeg = 90；（角度的变化）
通过 cos 跟 sin 来算出坐标
left = 半径 + x
top = 半径 - y
*/
setInterval( fn , 13 );
function fn() {
sDeg --; //定义角度变化
var r = 200; //半径
var x = Math.cos( Math.PI*sDeg/180 )* r , //圆x坐标的位置
y = Math.sin( Math.PI*sDeg/180 )* r ,//圆y坐标的位置
left = r + x - 10, // x到右上角的值
top = r - y - 10; // y 到右上角的值
console.log( sDeg );
console.log( x );
console.log( y );
oSpan.style.left = left + 'px';
oSpan.style.top = top + 'px';
}
</script>
</body>
网友评论