JavaScript生成的动态下雨背景效果实现方法
作者:bea
本文实例讲述了JavaScript生成的动态下雨背景效果实现方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODY bgcolor="#fef4d2" > <center> <script language=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程序设计有所帮助。
有用 | 无用
代码如下:
<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程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery 回调函数(callback)的使用和基础
- 使用jQuery获得内容以及内容的属性
- js实现跟随鼠标移动且带关闭功能的图片广告实例
- jquery渐隐渐显的图片幻灯闪烁切换实现方法
- 2则自己编写的jQuery特效分享
- javascript制作网页图片上实现下雨效果
- js实现格式化金额,字符,时间的方法
- 如何减少浏览器的reflow和repaint
- 详谈javascript中DOM的基本属性
- jqueryUI里拖拽排序示例分析
- Jquery的基本对象转换和文档加载用法实例
- jQuery操作JSON的CRUD用法实例
- javascript实现复选框超过限制即弹出警告框的方法
- javascript获得当前的信息的一些常用命令
- javascript实现图像循环明暗变化的方法
- NodeJS中利用Promise来封装异步函数
- JS往数组中添加项性能分析
- 浅谈JavaScript中的String对象常用方法
- JS实现点击颜色块切换指定区域背景颜色的方法