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 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 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实现带背景图片的文字链接

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注