JavaScript生成的动态下雨背景效果实现方法
2015-02-25 00:00
2321 查看
本文实例讲述了JavaScript生成的动态下雨背景效果实现方法。分享给大家供大家参考。具体实现方法如下:
希望本文所述对大家的javascript程序设计有所帮助。
<HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODY bgcolor="#fef4d2" > <center> <script language=JavaScript> <!-- [Step1]: 在此能够设置雨滴的多少 --> var rainsize = 40; <!-- [Step2]: 这里可以更改下雨的速度,数值大速度慢 --> 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生成的动态下雨背景效果实现方法
- javascript实现网页背景烟花效果的方法
- jQuery动态背景图片效果实现方法
- jQuery动态背景图片效果实现方法
- javascript实现网页背景烟花效果的方法
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- javascript实现的颜色块滑动的动态效果
- 实现 JavaScript 的方法重载效果
- javascript 事件处理、鼠标拖动效果实现方法详解
- 使用动态JavaScript实现多级菜单联动时不刷新页面的方法
- javascript动态生成表格,并实现对表格行的添加和删除
- JavaScript实现动态的表格效果
- javascript实现的颜色块滑动的动态效果
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- JavaScript动态生成访问方法
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- javascript高亮效果的二种实现方法
- 动态生成javascript代码,下拉条的级联效果
- JavaScript弹出层效果的实现方法