JavaScript生成的动态下雨背景效果实现方法

作者：bea

本文实例讲述了JavaScript生成的动态下雨背景效果实现方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<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>

希望本文所述对大家的javascript程序设计有所帮助。

有用 | 无用

JavaScript生成的动态下雨背景效果实现方法

猜你喜欢

您可能感兴趣的文章: