JS完成畫圓圈的小球

更新時(shí)間：2017年03月07日 14:05:35 作者：歐陽翠花

本文主要介紹了JS完成畫圓圈的小球的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖

圖（1）

圖（2）

代碼如下：

<html>
<head>
<title>JS動(dòng)畫之轉(zhuǎn)動(dòng)的小球</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;         //正弦函數(shù)的橫坐標(biāo)，理解為時(shí)間軸好一點(diǎn)。
function rotation()
{
 box.style.left=(600-Math.sin(1/180)*80)+Math.sin(n/180)*80+"px";  //300是小球的沒開始運(yùn)動(dòng)的初始位置，n表示時(shí)間軸，后邊是除數(shù)是為了將時(shí)間細(xì)分，使運(yùn)動(dòng)更平滑，80表示半徑。
 box.style.top=(300-Math.cos(1/180)*80)+Math.cos(n/180)*80+"px";  //第一個(gè)括號(hào)中的內(nèi)容是為了讓小球在開始運(yùn)動(dòng)時(shí)處于初始位置（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π 為一個(gè)轉(zhuǎn)動(dòng)周期，如果要半圓，只需將n的取值范圍減半，如需反方向轉(zhuǎn)動(dòng)，調(diào)換left和top的值即可。
 setTimeout(rotation,1);
}
rotation();
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

js
圓圈

相關(guān)文章

淺析JavaScript中var that=this
this是Javascript語言的一個(gè)關(guān)鍵字。它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對象，只能在函數(shù)內(nèi)部使用。接下來通過本文給大家分享JavaScript中var that=this所代表的意思，需要的朋友參考下吧
2017-02-02
Javascript的&&和||的另類用法
這篇文章主要介紹了Javascript的&&和||的另類用法,需要的朋友可以參考下
2014-07-07
Javascript中call和apply函數(shù)的比較和使用實(shí)例
這篇文章主要介紹了Javascript中call和apply函數(shù)的比較和使用實(shí)例,本文試圖用更加清晰簡單的思路來分析解釋這兩個(gè)函數(shù),需要的朋友可以參考下
2015-02-02
基于JS模仿windows文件按名稱排序效果
這篇文章主要介紹了基于JS實(shí)現(xiàn)模仿windows文件按名稱排序的相關(guān)資料,主要是對數(shù)字的處理操作，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
前端JS壓縮圖片的原理詳解(附源碼)
上傳圖片/視頻/文件是我們經(jīng)常會(huì)遇到的問題,但是一旦圖片過大就會(huì)導(dǎo)致不好的操作體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于前端JS壓縮圖片原理及實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-06-06
淺談jQuery中setInterval()方法
這篇文章主要介紹了淺談jQuery中setInterval()方法，十分的簡單實(shí)用，有需要的小伙伴可以參考下。
2015-07-07
2007/12/23更新創(chuàng)意無限,簡單實(shí)用(javascript log)
在javascript開發(fā)過程中，如果總是使用alert的方式調(diào)試程序，在某些簡單的程序中是可行的. 但是在通常的項(xiàng)目很復(fù)雜，這種方式已經(jīng)很難滿足，企業(yè)級開發(fā)的需要。
2007-12-12
D3.js實(shí)現(xiàn)折線圖的方法詳解
眾所周知圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和 Web 應(yīng)用和項(xiàng)目的可靠性?，F(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實(shí)現(xiàn)折線圖。
2016-09-09
js調(diào)用設(shè)備攝像頭的方法
這篇文章主要為大家詳細(xì)介紹了js調(diào)用設(shè)備攝像頭的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
Javascript實(shí)現(xiàn)仿QQ隨機(jī)數(shù)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)仿QQ隨機(jī)數(shù)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05