學習參考書JavaScript精緻範例辭典

回首頁 與我們連絡 網站地圖 加入我的最愛


 

旋轉飛行文字

看見下方那個像蒼蠅一樣繞著圓圈飛的文字沒?這就是〔旋轉飛行文字〕的特效,這也是一個非常好的進站畫面特效!本範例就是要示範與告訴你如何做出這種效果!

迴旋飛行文字

步驟一:用滑鼠將底下<SCRIPT Language="JavaScript"></SCRIPT>這兩個標記內的程式碼(含標記本身藍色的喔),標記起來,按滑鼠右鍵選擇【複製】〈游標不能離開標示起來的反白區喔〉將以下的控制碼先複製起來。

步驟二:然後在網頁中的 </HEAD> 之前按滑鼠右鍵選擇【貼上】將剛剛複製的東東貼上!(其實只要把程式碼貼在<HEAD></HEAD>標記中間任何一個地方都可以啦!)

步驟三:<BODY></BODY>標記中間你要放置飛行文字的地方加上下列網頁敘述!

<SPAN id=mytext style="POSITION: relative; VISIBILITY: hidden">迴旋飛行文字</SPAN>
橘色的文字是你要展現飛行文字特效的文字內容,直接更改為你要顯示的文字即可

步驟四:網頁中的<BODY>標記要改寫成<BODY onload="roundText('mytext'),speed;">,這樣才能正確動作哦!大功告成!

注意:本範例只適用於IE瀏覽器。

 
<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT language=JavaScript>
<!--
//測試瀏覽器是否為IE
if(navigator.appName=='Microsoft Internet Explorer') {testIE =true}
var i=0  
var speed=50
//旋轉速度
var x=250 
//文字旋轉中心點X座標
var y=120 
//文字旋轉中心點Y座標
var r=150 
//旋轉半徑
var act 

//位置變換副程式
function roundText(id){
if(testIE){ 
lay = document.all(id);

//利用基礎算數運算指定文字的位置
lay.style.left = Math.round(x + r*Math.cos(i*Math.PI/180))
lay.style.top = Math.round(y - r*Math.sin(i*Math.PI/180)) 
}
i+=5
setTimeout('roundText("'+id+'")',speed)
}
//-->
</SCRIPT>

</HEAD>
<!--設定網頁下載後就進行迴旋飛行文字特效-->
<BODY onload="roundText('mytext'),speed;">

 <!--迴旋飛行文字特效的兩組文字敘述-->
<SPAN
id=mytext style="POSITION: relative; VISIBILITY: hidden">迴旋飛行文字</SPAN>


</BODY>
</HTML>

JavaScript 文件
鏈結圖片切換
簡易月曆
隨機背景底圖
蹦出式廣告視窗
觸控式背景色轉換
游標跑馬燈
鏈結說明跑馬燈
文字鏈結提示說明
四處移動的圖片
圖片式進站時間
簡易線上占卜
文字拉把遊戲
圖片拉把遊戲
定時更換圖片(1)
定時更換圖片(2)
項目導覽說明
上下震動與捲動頁面
飛行定位文字
旋轉飛行文字
幻化隱現文字
漫天飛舞
落葉片片
浮動鏈結選單
側拉式鏈結選單
友站連結/快速選單
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為