Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼
更新時間：2015年08月04日 13:06:59 作者：皮蛋
這篇文章主要介紹了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼,可實(shí)現(xiàn)圓圈的旋轉(zhuǎn)與運(yùn)動效果,涉及javascript動態(tài)操作頁面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運(yùn)算的技巧,需要的朋友可以參考下
本文實(shí)例講述了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈。分享給大家供大家參考。具體如下：
這里基于Javascript實(shí)現(xiàn)會旋轉(zhuǎn)的圓圈，有點(diǎn)三維變幻的效果，立體感很強(qiáng)，代碼主要是基于JS，學(xué)習(xí)Js腳本編程來說，是個學(xué)習(xí)JS生成動畫的好范例。
運(yùn)行效果如下圖所示：
具體代碼如下：
<html>
<head>
<title>旋轉(zhuǎn)的圓圈</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script language="JavaScript">
amount=ybase=15;
Color='#ffaaff';
GlowColor='#ff00ff';
xbase=-70;
step=c=0.05;
TrigSplit=360/amount;
xpos=ypos=currStep=Ci=0;
for (i=0; i < amount; i++)
document.write('<div id="Div" style="position:absolute;top:0px;left:0px;height:20;width:20;text-align:center"><B>.</B></div>');
function running(){
var MY=document.body.scrollTop+document.body.clientHeight/2 + document.body.clientHeight/2.8*Math.cos((Ci)/4)*Math.cos(Ci/10);
var MX=document.body.scrollLeft+document.body.clientWidth/2 + document.body.clientWidth/2.4*Math.sin((Ci)/6)*Math.sin(Ci/20);
ypos=MY;
xpos=MX;
for (i=0; i < amount; i++){
var d=Div[i].style;
if (d.pixelTop > ypos+2){
d.fontSize=18;
d.paddingTop=7;
d.filter='glow(color='+GlowColor+', strength=7)';
if (d.pixelTop > ypos+10){
d.fontSize=15;
d.paddingTop=10;
d.filter='glow(color='+GlowColor+', strength=5)';
}
}
else{
d.fontSize=25;
d.paddingTop=0;
d.color=Color;
d.filter='glow(color='+GlowColor+', strength=8)';
}
d.top=ypos+ybase*Math.sin(currStep+i*TrigSplit*Math.PI/180);
d.left=xpos+xbase*Math.cos(currStep+i*TrigSplit*Math.PI/180);
}
Ci+=c;
currStep+=step;
setTimeout('running()',20);
}
running();
</script>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序開發(fā)之錄音機(jī) 音頻播放 動畫實(shí)例 (真機(jī)可用)
這篇文章主要介紹了微信小程序開發(fā)之錄音機(jī) 音頻播放 動畫實(shí)例 (真機(jī)可用)，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2016-12-12
javascript控制圖片播放的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript控制圖片播放的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
純JS實(shí)現(xiàn)的讀取excel文件內(nèi)容功能示例【支持所有瀏覽器】
這篇文章主要介紹了純JS實(shí)現(xiàn)的讀取excel文件內(nèi)容功能,結(jié)合實(shí)例形式分析了基于js相關(guān)插件進(jìn)行Excel文件讀取的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
做輸入校驗(yàn)的時候如果你前端框架用的是bootstrap的話，首推bootstrapValidator校驗(yàn)方式，下面通過本文給大家分享下校驗(yàn)流程，一起看看吧2016-12-12
webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程
這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
數(shù)據(jù)包圍著我們。雖然搜索引擎和其他應(yīng)用都對基于文本方式表示的數(shù)據(jù)偏愛有加，但人們發(fā)現(xiàn)可視化是更容易理解的一種方式。今年初，SitePoint 發(fā)表了 Aurelio 的文章《 Chart.js簡介》。在深入研究 Chart.js 的功能后，本文將會講解這篇簡介的一些重點(diǎn)。2015-10-10
這篇文章主要介紹了微信小程序時間控件picker view的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript提供了一個內(nèi)部數(shù)據(jù)結(jié)構(gòu)，用來描述對象的屬性，控制它的行為，比如該屬性是否可寫、可遍歷等等。這個內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為“屬性描述對象”。本文主要帶大家了解一下JavaScript中你必須了解的屬性描述對象，需要的可以參考一下2022-12-12
深入了解JavaScript中邏輯賦值運(yùn)算符的應(yīng)用
邏輯賦值是對現(xiàn)有數(shù)學(xué)和二進(jìn)制邏輯運(yùn)算符的擴(kuò)展。我們先復(fù)習(xí)一下，然后看看把它們結(jié)合在一起能得到什么，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-11-11
JavaScript Canvas編寫炫彩的網(wǎng)頁時鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas編寫炫彩的網(wǎng)頁時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10