TShopping

 找回密碼
 註冊
搜索
查看: 893|回復: 1

[教學] 圖片特效-魚兒落下

[複製鏈接]
發表於 2009-5-23 16:17:19 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
需先將此圖另存圖片;存回您的網站資料夾內   
在 <body>下貼上下面語法

 
  1. <script LANGUAGE="javascript">
  2. <!-- Begin
  3. var no = 25; // snow number
  4. var speed = 10; // smaller number moves the snow faster
  5. var snowflake = "a248.gif";

  6. var ns4up = (document.layers) ? 1 : 0; // browser sniffer
  7. var ie4up = (document.all) ? 1 : 0;
  8. var dx, xp, yp; // coordinate and position variables
  9. var am, stx, sty; // amplitude and step variables
  10. var i, doc_width = 800, doc_height = 600;
  11. if (ns4up) {
  12. doc_width = self.innerWidth;
  13. doc_height = self.innerHeight;
  14. } else if (ie4up) {
  15. doc_width = document.body.clientWidth;
  16. doc_height = document.body.clientHeight;
  17. }
  18. dx = new Array();
  19. xp = new Array();
  20. yp = new Array();
  21. am = new Array();
  22. stx = new Array();
  23. sty = new Array();
  24. for (i = 0; i < no; ++ i) {
  25. dx = 0; // set coordinate variables
  26. xp = Math.random()*(doc_width-50); // set position variables
  27. yp = Math.random()*doc_height;
  28. am = Math.random()*20; // set amplitude variables
  29. stx = 0.02 + Math.random()/10; // set step variables
  30. sty = 0.7 + Math.random(); // set step variables
  31. if (ns4up) { // set layers
  32. if (i == 0) {
  33. document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
  34. document.write("top=\"15\" visibility=\"show\"><img src=\"");
  35. document.write(snowflake + "\" border=\"0\"></layer>");
  36. } else {
  37. document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
  38. document.write("top=\"15\" visibility=\"show\"><img src=\"");
  39. document.write(snowflake + "\" border=\"0\"></layer>");
  40. }
  41. } else if (ie4up) {
  42. if (i == 0) {
  43. document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
  44. document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
  45. document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
  46. document.write(snowflake + "\" border=\"0\"></div>");
  47. } else {
  48. document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
  49. document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
  50. document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
  51. document.write(snowflake + "\" border=\"0\"></div>");
  52. }
  53. }
  54. }
  55. function snowNS() { // Netscape main animation function
  56. for (i = 0; i < no; ++ i) { // iterate for every dot
  57. yp += sty;
  58. if (yp > doc_height+50) {
  59. xp = Math.random()*(doc_width-am-30);
  60. yp = 0;
  61. stx = 0.02 + Math.random()/10;
  62. sty = 0.7 + Math.random();
  63. doc_width = self.innerWidth;
  64. doc_height = self.innerHeight;
  65. }
  66. dx += stx;
  67. document.layers["dot"+i].top = yp;
  68. document.layers["dot"+i].left = xp + am*Math.sin(dx);
  69. }
  70. setTimeout("snowNS()", speed);
  71. }
  72. function snowIE() { // IE main animation function
  73. for (i = 0; i < no; ++ i) { // iterate for every dot
  74. yp += sty;
  75. if (yp > doc_height+50) {
  76. xp = Math.random()*(doc_width-am-30);
  77. yp = 0;
  78. stx = 0.02 + Math.random()/10;
  79. sty = 0.7 + Math.random();
  80. doc_width = document.body.clientWidth;
  81. doc_height = document.body.clientHeight;
  82. }
  83. dx += stx;
  84. document.all["dot"+i].style.pixelTop = yp;
  85. document.all["dot"+i].style.pixelLeft = xp + am*Math.sin(dx);
  86. }
  87. setTimeout("snowIE()", speed);
  88. }
  89. if (ns4up) {
  90. snowNS();
  91. } else if (ie4up) {
  92. snowIE();
  93. }
  94. // End -->
  95. </script>
複製代碼

 

臉書網友討論
發表於 2013-11-14 00:16:43 | 顯示全部樓層
說的真有道理啊!

版主招募中

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

本版積分規則



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

GMT+8, 2016-12-4 03:35 , Processed in 0.060308 second(s), 19 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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