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

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


 

漫天飛舞

看到網頁中四處游移飛舞的蝴蝶沒?很美呦!這個特效很適合放在個人自我介紹的網頁中,當然,放在其他主題網頁中也可以喔!

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

步驟二:然後在網頁中的<BODY>標記 之後按滑鼠右鍵選擇【貼上】將剛剛複製的東東貼上!

步驟三:程式敘述中特別加註必須連接為一行的部分,請記得更正過來

步驟四:將原始碼中橘紅地方的內容改成你要顯現的圖片檔名大功告成!

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

 
<HTML>
<HEAD>
<TITLE>漫天飛舞</TITLE>

</HEAD>

<BODY>

 <SCRIPT language=JavaScript>
<!--
var number = 15
//網頁中要出現的圖片數量
var speed = 5 
//變換速度
var maximg =2 
//圖片檔數目,從0起算,0.1.2共三個圖檔

var act = new Array(),positionX = new Array(),positionY = new Array()
var moveX = new Array(),moveY = new Array()
var j = maximg
img = new Array()

//指定圖檔來源,配合maximg變數設定
img[0] = "fly1.gif"
img[1] = "fly2.gif"
img[2] = "fly3.gif"


for (var i = 0; i < number ;++ i) {
act[i] = 0 
positionX[i] = Math.random()*document.body.clientWidth-50
//水平X軸顯示範圍設定
positionY[i] = Math.random()*document.body.clientHeight  
//垂直Y軸顯示範圍設定
moveX[i] = 0.1 + Math.random()/100 
//水平X軸移動設定
moveY[i] = 0.1 + Math.random()*3   
//垂直Y軸移動設定

if (i == 0) 
{
//以下兩行敘述必許連接寫成一行
document.write("<div id=\"fly"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible\"><img src=\"" + img[j] + "\" border=\"0\"></div>")}

 else {
//以下兩行敘述必許連接寫成一行
document.write("<div id=\"fly"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible\"><img src=\"" + img[j] + "\" border=\"0\"></div>")}


if (j == 0) { j = maximg }
else { j -= 1 }
}


function gofly() { 
for (var i = 0; i < number ;++ i) { // iterate for every fly
positionY[i] -= moveY[i]
act[i] += moveX[i]
document.all["fly"+i].style.pixelTop = positionY[i]+ Math.cos(act[i])*positionY[i]/15
document.all["fly"+i].style.pixelLeft = positionX[i] + Math.sin(act[i])*positionX[i]/50

if (positionY[i] < 0) {
moveX[i] = 0.1+ Math.random()/100
moveY[i] = 0.1 + Math.random()*3
positionX[i] = Math.random()*document.body.clientWidth-50
positionY[i] = document.body.clientHeight
}

}
setTimeout("gofly()", speed)
}


gofly()

// -->
</SCRIPT> 


</BODY>
</HTML>

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

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