魚缸...(純屬娛樂...)
<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="fish2"
FishName="fish1"
FishName="fish2"
FishName="fish1"
FishName="fish3"
FishName="fish1"
FishName="fish4"
FishName="fish2"
var FishPreload=new Array()
var j=0
for(i=0;i<FishName.length;i++){ //預先載入圖片
FishPreload=new Image()
FishPreload.src=eval("FishPath+FishName+'_l.gif'")
j++
FishPreload=new Image()
FishPreload.src=eval("FishPath+FishName+'_r.gif'")
j++
}
function CheckLoad(){
var isLoaded=true
for(i=0;i<FishPreload.length;i++){
if(FishPreload.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
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.V_Speed=4
FishProp.H_Speed=8
}
function SwinControl(){ //由於是用亂數決定游動位置，偶爾會發生魚群疊成一堆的狀況。
for(i=0;i<FishProp.length;i++){
with(eval('fish_'+i).style){
posTop =(FishProp.SwinDown)?posTop+FishProp.V_Speed:posTop-FishProp.V_Speed
posLeft=(FishProp.SwinRight)?posLeft+FishProp.H_Speed:posLeft-FishProp.H_Speed
if(eval('fish_'+i).offsetTop>=FishProp.B_Margin){FishProp.SwinDown=false}
if(eval('fish_'+i).offsetTop<=FishProp.T_Margin){FishProp.SwinDown=true}
if(eval('fish_'+i).offsetLeft>=FishProp.R_Margin){
FishProp.SwinRight=false
eval('fish_'+i).src=eval("FishPath+FishProp.Name+'_l.gif'")
}
if(eval('fish_'+i).offsetLeft<=FishProp.L_Margin){
FishProp.SwinRight=true
eval('fish_'+i).src=eval("FishPath+FishProp.Name+'_r.gif'")
}
}
}
}
function ActiveProperty(){
for(i=0;i<FishProp.length;i++){
FishProp.T_Margin=Math.floor(Math.random()*(FishJar.clientHeight-eval('fish_'+i).offsetHeight-120)) //總高度減 120 魚才不會貼地游
FishProp.B_Margin=FishProp.T_Margin+eval('fish_'+i).offsetHeight
FishProp.L_Margin=Math.floor(Math.random()*(FishJar.clientWidth/2-eval('fish_'+i).offsetWidth*2))
FishProp.R_Margin=Math.floor(Math.random()*(FishJar.clientWidth/2-eval('fish_'+i).offsetWidth*2))+(FishJar.clientWidth/2)
FishProp.V_Speed =Math.floor(Math.random()*2)
FishProp.H_Speed =Math.floor(Math.random()*4)+1
}
setTimeout("ActiveProperty()",5000) //每 5 秒鐘改變一次游動的速度與方向。
}
function ApplyFish(){
for(i=0;i<FishName.length;i++){
FishProp=new Property()
var ft=Math.floor(Math.random()*(FishJar.clientHeight-150))+40
var fl=Math.floor(Math.random()*(FishJar.clientWidth-200))+100
FishProp.SwinRight=(i%2)?true:false
vd=(i%2)?"r":"l"
FishJar.insertAdjacentHTML("beforeEnd","<img id=\"fish_"+i+"\" src=\""+FishProp.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> 不錯，感謝版主 回復一下
頁:
[1]