這篇文章主要介紹了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼,可實(shí)現(xiàn)圓圈的旋轉(zhuǎn)與運(yùn)動(dòng)效果,涉及javascript動(dòng)態(tài)操作頁面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運(yùn)算的技巧,需要的朋友可以參考下

本文實(shí)例講述了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈。分享給大家供大家參考。具體如下：

這里基于Javascript實(shí)現(xiàn)會(huì)旋轉(zhuǎn)的圓圈，有點(diǎn)三維變幻的效果，立體感很強(qiáng)，代碼主要是基于JS，學(xué)習(xí)Js腳本編程來說，是個(gè)學(xué)習(xí)JS生成動(dòng)畫的好范例。

運(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ī) 音頻播放動(dòng)畫實(shí)例 (真機(jī)可用)
這篇文章主要介紹了微信小程序開發(fā)之錄音機(jī) 音頻播放動(dòng)畫實(shí)例 (真機(jī)可用)，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。
2016-12-12
javascript控制圖片播放的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript控制圖片播放的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
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
BootStrapValidator校驗(yàn)方式
做輸入校驗(yàn)的時(shí)候如果你前端框架用的是bootstrap的話，首推bootstrapValidator校驗(yàn)方式，下面通過本文給大家分享下校驗(yàn)流程，一起看看吧
2016-12-12
webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程
這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-06-06
使用Chart.js圖表庫制作漂亮的響應(yīng)式表單
數(shù)據(jù)包圍著我們。雖然搜索引擎和其他應(yīng)用都對基于文本方式表示的數(shù)據(jù)偏愛有加，但人們發(fā)現(xiàn)可視化是更容易理解的一種方式。今年初，SitePoint 發(fā)表了 Aurelio 的文章《 Chart.js簡介》。在深入研究 Chart.js 的功能后，本文將會(huì)講解這篇簡介的一些重點(diǎn)。
2015-10-10
微信小程序時(shí)間控件picker view使用詳解
這篇文章主要介紹了微信小程序時(shí)間控件picker view的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
你必須了解的JavaScript中的屬性描述對象詳解(下)
JavaScript提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)，用來描述對象的屬性，控制它的行為，比如該屬性是否可寫、可遍歷等等。這個(gè)內(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)頁時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas編寫炫彩的網(wǎng)頁時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10