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 demo 基本技巧
Dec 18 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
js和jquery中获取非行间样式
May 05 jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 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使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php判断linux下程序问题实例
2015/07/09 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
Python列表推导式的使用方法
2013/11/21 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python实现大学人员管理系统
2019/10/25 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
房地产出纳岗位职责
2013/12/01 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
家长建议怎么写
2014/05/15 职场文书
党员个人总结范文
2015/02/14 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
Ruby处理YAML和json数据
2022/04/18 Ruby