TShopping

 找回密碼
 註冊
搜索
查看: 1009|回復: 2

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

[複製鏈接]
發表於 2008-6-1 18:59:56 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
  1. <html>
  2. <head>
  3. <style>
  4. body,td {font:normal 12px 細明體;cursor:default}
  5. </style>
  6. </head>
  7. <body bgcolor=#dadada>
  8. <center>
  9. <div id="FishJar" style="position:relative;width:500px;height:380px;border:2px inset white;background:url(fish_bg.jpg) #059;overflow:hidden">
  10. <div id="Loading" style="width:180px;height:100%;text-align:left">
  11. <table width=100% height=80%><tr>
  12. <td><font style="font:normal 12px 細明體;color:#fff;letter-spacing:2px;white-space:nowrap"> 資料載入中,請稍候<span id="LoadingDots">....</span> </font></td>
  13. </tr></table>
  14. </div>
  15. </div>

  16. 本特效只提供魚的動作,您可自行加入背景音樂,水草,氣泡... 等物件,讓水族箱更生動。
  17. </center>
  18. </body>
  19. </html>
  20. <script language="javascript">
  21. var FishPath="./"        //圖片路徑 ( 若與網頁位置相同請設為 ./ 或空白 )
  22. var FishProp=new Array()
  23. var FishName=new Array()
  24. //依電腦的效能配置魚的數量,筆者的電腦為 P200 養 10 條魚已是極限 ( 養太多會不順暢 )。
  25. FishName[0]="fish2"
  26. FishName[1]="fish1"
  27. FishName[2]="fish2"
  28. FishName[3]="fish1"
  29. FishName[4]="fish3"
  30. FishName[5]="fish1"
  31. FishName[6]="fish4"
  32. FishName[7]="fish2"

  33. var FishPreload=new Array()
  34. var j=0
  35. for(i=0;i<FishName.length;i++){        //預先載入圖片
  36. FishPreload[j]=new Image()
  37. FishPreload[j].src=eval("FishPath+FishName[i]+'_l.gif'")
  38. j++
  39. FishPreload[j]=new Image()
  40. FishPreload[j].src=eval("FishPath+FishName[i]+'_r.gif'")
  41. j++
  42. }

  43. function CheckLoad(){
  44. var isLoaded=true
  45. for(i=0;i<FishPreload.length;i++){
  46. if(FishPreload[i].readyState!="complete")
  47. isLoaded=false
  48. }
  49. if(isLoaded){
  50. ApplyFish()
  51. Loading.style.display="none"
  52. }else{
  53. LoadingDots.innerHTML=(LoadingDots.innerHTML=="....")?"":LoadingDots.innerHTML+"."
  54. setTimeout("CheckLoad()",300)
  55. }
  56. }

  57. function Property(){        //賦予每條魚新屬性。
  58. this.Name=FishName[i]
  59. this.T_Margin
  60. this.L_Margin
  61. this.B_Margin
  62. this.R_Margin
  63. this.SwinDown
  64. this.SwinRight
  65. this.V_Speed
  66. this.H_Speed
  67. return this
  68. }

  69. function SwinAway(n){        //滑鼠碰觸到魚時迅速離開。
  70. FishProp[n].V_Speed=4
  71. FishProp[n].H_Speed=8
  72. }

  73. function SwinControl(){        //由於是用亂數決定游動位置,偶爾會發生魚群疊成一堆的狀況。
  74. for(i=0;i<FishProp.length;i++){
  75. with(eval('fish_'+i).style){
  76. posTop =(FishProp[i].SwinDown)?posTop+FishProp[i].V_Speed:posTop-FishProp[i].V_Speed
  77. posLeft=(FishProp[i].SwinRight)?posLeft+FishProp[i].H_Speed:posLeft-FishProp[i].H_Speed
  78. if(eval('fish_'+i).offsetTop>=FishProp[i].B_Margin){FishProp[i].SwinDown=false}
  79. if(eval('fish_'+i).offsetTop<=FishProp[i].T_Margin){FishProp[i].SwinDown=true}
  80. if(eval('fish_'+i).offsetLeft>=FishProp[i].R_Margin){
  81. FishProp[i].SwinRight=false
  82. eval('fish_'+i).src=eval("FishPath+FishProp[i].Name+'_l.gif'")
  83. }
  84. if(eval('fish_'+i).offsetLeft<=FishProp[i].L_Margin){
  85. FishProp[i].SwinRight=true
  86. eval('fish_'+i).src=eval("FishPath+FishProp[i].Name+'_r.gif'")
  87. }
  88. }
  89. }
  90. }

  91. function ActiveProperty(){
  92. for(i=0;i<FishProp.length;i++){
  93. FishProp[i].T_Margin=Math.floor(Math.random()*(FishJar.clientHeight-eval('fish_'+i).offsetHeight-120)) //總高度減 120 魚才不會貼地游
  94. FishProp[i].B_Margin=FishProp[i].T_Margin+eval('fish_'+i).offsetHeight
  95. FishProp[i].L_Margin=Math.floor(Math.random()*(FishJar.clientWidth/2-eval('fish_'+i).offsetWidth*2))
  96. FishProp[i].R_Margin=Math.floor(Math.random()*(FishJar.clientWidth/2-eval('fish_'+i).offsetWidth*2))+(FishJar.clientWidth/2)
  97. FishProp[i].V_Speed =Math.floor(Math.random()*2)
  98. FishProp[i].H_Speed =Math.floor(Math.random()*4)+1
  99. }
  100. setTimeout("ActiveProperty()",5000) //每 5 秒鐘改變一次游動的速度與方向。
  101. }

  102. function ApplyFish(){
  103. for(i=0;i<FishName.length;i++){
  104. FishProp[i]=new Property()
  105. var ft=Math.floor(Math.random()*(FishJar.clientHeight-150))+40
  106. var fl=Math.floor(Math.random()*(FishJar.clientWidth-200))+100
  107. FishProp[i].SwinRight=(i%2)?true:false
  108. vd=(i%2)?"r":"l"
  109. FishJar.insertAdjacentHTML("beforeEnd","<img id=\"fish_"+i+"\" src=\""+FishProp[i].Name+"_"+vd+".gif\" onmouseover=\"SwinAway("+i+")\" style=\"position:absolute;top:"+ft+";left:"+fl+"\">")
  110. }
  111. ActiveProperty()
  112. setInterval("SwinControl()",1)
  113. }
  114. window.onload=CheckLoad
  115. document.ondragstart  =new Function("return false")
  116. document.onselectstart=new Function("return false")
  117. document.oncontextmenu=new Function("return false")

  118. </script>
複製代碼

 

臉書網友討論
發表於 2013-11-13 01:09:28 | 顯示全部樓層
不錯,感謝版主

版主招募中

發表於 2013-11-13 01:09:28 | 顯示全部樓層
回復一下  


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-6 21:57 , Processed in 0.054016 second(s), 19 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表