ihao論壇 - Powered by Discuz! Board

複製內容到剪貼板
代碼:

<html>

<head>

<style>

body,td {font:normal 12px 細明體;cursor:default}

</style>

</head>

<body bgcolor=#dadada>

<center>

<div id="FishJar" style="position:relative;width:500px;height:380px;border:2px inset white;background:url(fish_bg.jpg) #059;overflow:hidden">

<div id="Loading" style="width:180px;height:100%;text-align:left">

<table width=100% height=80%><tr>

<td><font style="font:normal 12px 細明體;color:#fff;letter-spacing:2px;white-space:nowrap"> 資料載入中，請稍候<span id="LoadingDots">....</span> </font></td>

</tr></table>

</div>

</div>



本特效只提供魚的動作，您可自行加入背景音樂，水草，氣泡... 等物件，讓水族箱更生動。

</center>

</body>

</html>

<script language="javascript">

var FishPath="./"        //圖片路徑 ( 若與網頁位置相同請設為 ./ 或空白 )

var FishProp=new Array()

var FishName=new Array()

//依電腦的效能配置魚的數量，筆者的電腦為 P200 養 10 條魚已是極限 ( 養太多會不順暢 )。

FishName[0]="fish2"

FishName[1]="fish1"

FishName[2]="fish2"

FishName[3]="fish1"

FishName[4]="fish3"

FishName[5]="fish1"

FishName[6]="fish4"

FishName[7]="fish2"



var FishPreload=new Array()

var j=0

for(i=0;i<FishName.length;i++){        //預先載入圖片

FishPreload[j]=new Image()

FishPreload[j].src=eval("FishPath+FishName[i]+'_l.gif'")

j++

FishPreload[j]=new Image()

FishPreload[j].src=eval("FishPath+FishName[i]+'_r.gif'")

j++

}



function CheckLoad(){

var isLoaded=true

for(i=0;i<FishPreload.length;i++){

if(FishPreload[i].readyState!="complete")

isLoaded=false

}

if(isLoaded){

ApplyFish()

Loading.style.display="none"

}else{

LoadingDots.innerHTML=(LoadingDots.innerHTML=="....")?"":LoadingDots.innerHTML+"."

setTimeout("CheckLoad()",300)

}

}



function Property(){        //賦予每條魚新屬性。

this.Name=FishName[i]

this.T_Margin

this.L_Margin

this.B_Margin

this.R_Margin

this.SwinDown

this.SwinRight

this.V_Speed

this.H_Speed

return this

}



function SwinAway(n){        //滑鼠碰觸到魚時迅速離開。

FishProp[n].V_Speed=4

FishProp[n].H_Speed=8

}



function SwinControl(){        //由於是用亂數決定游動位置，偶爾會發生魚群疊成一堆的狀況。

for(i=0;i<FishProp.length;i++){

with(eval('fish_'+i).style){

posTop =(FishProp[i].SwinDown)?posTop+FishProp[i].V_Speed:posTop-FishProp[i].V_Speed

posLeft=(FishProp[i].SwinRight)?posLeft+FishProp[i].H_Speed:posLeft-FishProp[i].H_Speed

if(eval('fish_'+i).offsetTop>=FishProp[i].B_Margin){FishProp[i].SwinDown=false}

if(eval('fish_'+i).offsetTop<=FishProp[i].T_Margin){FishProp[i].SwinDown=true}

if(eval('fish_'+i).offsetLeft>=FishProp[i].R_Margin){

FishProp[i].SwinRight=false

eval('fish_'+i).src=eval("FishPath+FishProp[i].Name+'_l.gif'")

}

if(eval('fish_'+i).offsetLeft<=FishProp[i].L_Margin){

FishProp[i].SwinRight=true

eval('fish_'+i).src=eval("FishPath+FishProp[i].Name+'_r.gif'")

}

}

}

}



function ActiveProperty(){

for(i=0;i<FishProp.length;i++){

FishProp[i].T_Margin=Math.floor(Math.random()*(FishJar.clientHeight-eval('fish_'+i).offsetHeight-120)) //總高度減 120 魚才不會貼地游

FishProp[i].B_Margin=FishProp[i].T_Margin+eval('fish_'+i).offsetHeight

FishProp[i].L_Margin=Math.floor(Math.random()*(FishJar.clientWidth/2-eval('fish_'+i).offsetWidth*2))

FishProp[i].R_Margin=Math.floor(Math.random()*(FishJar.clientWidth/2-eval('fish_'+i).offsetWidth*2))+(FishJar.clientWidth/2)

FishProp[i].V_Speed =Math.floor(Math.random()*2)

FishProp[i].H_Speed =Math.floor(Math.random()*4)+1

}

setTimeout("ActiveProperty()",5000) //每 5 秒鐘改變一次游動的速度與方向。

}



function ApplyFish(){

for(i=0;i<FishName.length;i++){

FishProp[i]=new Property()

var ft=Math.floor(Math.random()*(FishJar.clientHeight-150))+40

var fl=Math.floor(Math.random()*(FishJar.clientWidth-200))+100

FishProp[i].SwinRight=(i%2)?true:false

vd=(i%2)?"r":"l"

FishJar.insertAdjacentHTML("beforeEnd","<img id=\"fish_"+i+"\" src=\""+FishProp[i].Name+"_"+vd+".gif\" onmouseover=\"SwinAway("+i+")\" style=\"position:absolute;top:"+ft+";left:"+fl+"\">")

}

ActiveProperty()

setInterval("SwinControl()",1)

}

window.onload=CheckLoad

document.ondragstart  =new Function("return false")

document.onselectstart=new Function("return false")

document.oncontextmenu=new Function("return false")



</script>