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 相关文章推荐
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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 地区分类排序算法
2013/07/01 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JavaScript中Function详解
2015/02/27 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python局部赋值的规则
2013/03/07 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python实现通讯录功能
2018/02/22 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
歌唱比赛主持词
2014/03/18 职场文书
文案策划求职信
2014/04/14 职场文书
无传销社区工作方案
2014/05/13 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
公司授权委托书样本
2014/09/15 职场文书
银行授权委托书范本
2014/10/04 职场文书
捐助感谢信
2015/01/22 职场文书
校长新学期致辞
2015/07/30 职场文书
大学副班长竞选稿
2015/11/21 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL