魚缸...(純屬娛樂...)

woff · 發表於 2008-6-1 18:59:56

<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>

複製代碼

mvaed · 發表於 2013-11-13 01:09:28

不錯，感謝版主

butteredfly · 發表於 2013-11-13 01:09:28

回復一下

帳號		自動登錄		找回密碼
密碼				註冊

[教學] 魚缸...(純屬娛樂...)