圓做圓周運(yùn)動(dòng)
微信圖片_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;
/*
思路：
計(jì)算出球的坐標(biāo)（ x , y ）,通過(guò)設(shè)置left 跟 top 來(lái)確定位置
可以 定義一個(gè)sDeg = 90卦洽；（角度的變化）
通過(guò) cos 跟 sin 來(lái)算出坐標(biāo)
left = 半徑 + x
top = 半徑 - y
*/
setInterval( fn , 13 );
function fn() {
sDeg --; //定義角度變化
var r = 200; //半徑
var x = Math.cos( Math.PI*sDeg/180 )* r , //圓x坐標(biāo)的位置
y = Math.sin( Math.PI*sDeg/180 )* r ,//圓y坐標(biāo)的位置
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>
