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程序设计有所帮助。

Javascript 相关文章推荐
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
You might like
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
学习Vue组件实例
2018/04/28 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python并发编程之线程实例解析
2017/12/27 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
详解django中Template语言
2020/02/22 Python
keras导入weights方式
2020/06/12 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
高中生职业规划范文
2014/03/09 职场文书
教师一帮一活动总结
2014/07/08 职场文书
品牌转让协议书
2014/08/20 职场文书
工作年限证明模板
2015/06/15 职场文书
经典爱情感言
2015/08/03 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android