JavaScript動態雨景代碼

2024-09-05 12:21:59

字體：大中小

來源：轉載

供稿：網友

JavaScript生成的效果，動態的下雨背景，下了很大的雨，主要用JS的數組實現，下雨的速度可以改變，數值越大速度越慢，雨滴的多少也是可以設置的，數據越大雨滴越多。

<HTML><HEAD><TITLE>JavaScript動態雨景</TITLE></HEAD><BODY bgcolor="#fef4d2" ><center><script language=JavaScript>var rainsize = 40;var speed = 10;var x = new Array();var y = new Array();var r = new Array();var cx = new Array();var cy = new Array();var doc_width = document.body.clientWidth;var doc_height = document.body.clientHeight;for(i=0; i<rainsize; ++i) {   initRain();  if (i == 0) {    document.write("<div   class="70qarhlowxag"   id=/"dot"+ i +"/" style=/"POSITION: ");    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");    document.write("visible; TOP: 15px; LEFT: 15px;/"><font color=/"blue/">");    document.write(",</font></div>"); }  else {    document.write("<div   class="70qarhlowxag"   id=/"dot"+ i +"/" style=/"POSITION: ");    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");    document.write("visible; TOP: 15px; LEFT: 15px;/"><font color=/"blue/">");    document.write(",.</font></div>");  }}function initRain() {  a = 6;  r[i] = 1;  sn = Math.sin(a);  cs = Math.cos(a);  cx[i] = Math.random() * doc_width + 1;  cy[i] = Math.random() * doc_height + 1;  x[i] = r[i] * sn + cx[i];  y[i] = cy[i];}function raindropIE() {  for (i = 0; i < rainsize; ++ i) {     updateRain();     if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {         makeRain();         doc_width = document.body.clientWidth;         doc_height = document.body.clientHeight; }     document.all["dot"+i].style.pixelTop = y[i];     document.all["dot"+i].style.pixelLeft = x[i]; }  setTimeout("raindropIE()", speed); }function updateRain() {  r[i] += 10;  x[i] = r[i] * sn + cx[i];  y[i] = r[i] * cs + cy[i];}function makeRain() {  r[i] = 1;  cx[i] = Math.random() * doc_width + 1;  cy[i] = 1;  x[i] = r[i] * sn + cx[i];  y[i] = r[i] * cs + cy[i];}raindropIE();</script> </BODY></HTML>

上一篇：利用JS隨機生成網頁背景顏色

下一篇：CSS實現帶背景圖片的文字鏈接