编程 Javascript

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

Posted in Javascript onFebruary 25, 2015

本文实例讲述了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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 禁止复制网页

Jun 11 Javascript

JS 树形递归实例代码

May 18 Javascript

一行代码告别document.getElementById

Jun 01 Javascript

javascript与jquery中跳出循环的区别总结

Nov 04 Javascript

html的DOM中document对象forms集合用法实例

Jan 21 Javascript

使用Chart.js图表库制作漂亮的响应式表单

Oct 28 Javascript

jQuery中get方法用法分析

Dec 07 Javascript

JS常见疑难点分析之match，charAt，charCodeAt，map，search用法分析

Dec 25 Javascript

mac上node.js环境的安装测试

Jul 03 Javascript

详解为生产环境编译Angular2应用的方法

Dec 10 Javascript

node.js基于dgram数据报模块创建UDP服务器和客户端操作示例

Feb 12 Javascript

Electron整合React使用搭建开发环境的步骤详解

Jun 07 Javascript

JS实现进入页面时渐变背景色的方法

Feb 25 #Javascript

JS实现让网页背景图片斜向移动的方法

Feb 25 #Javascript

Javascript中获取对象的原型对象的方法小结

Feb 25 #Javascript

JavaScript中判断变量是数组、函数或是对象类型的方法

Feb 25 #Javascript

Js可拖拽放大的层拖动特效实现方法

Feb 25 #Javascript

JS实现自适应高度表单文本框的方法

Feb 25 #Javascript

如何编写高质量JS代码(续)

Feb 25 #Javascript