效果圖
圖（1）
圖（2）
代碼如下：
<html><head><title>JS動畫之轉動的小球</title><style type="text/css">div{width:20px;height:20px;background-color:black;position:absolute;border:1px solid red;border-radius:50%;}</style></head><body><div id="box"></div><script type="text/javascript">var box=document.getElementById('box');box.style.left="600";box.style.top="300px";var n=0; //正弦函數的橫坐標，理解為時間軸好一點。function rotation(){ box.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px"; //300是小球的沒開始運動的初始位置，n表示時間軸，后邊是除數是為了將時間細分，使運動更平滑，80表示半徑。 box.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px"; //第一個括號中的內容是為了讓小球在開始運動時處于初始位置（300,300） var dr = document.createElement('div'); dr.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px"; dr.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px"; document.body.appendChild(dr); n++; if(n>180*2*Math.PI)return false; // 0 到 2π 為一個轉動周期，如果要半圓，只需將n的取值范圍減半，如需反方向轉動，調換left和top的值即可。 setTimeout(rotation,1);}rotation();</script></body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
