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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 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操作文件方法问答
2007/03/16 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
js select option对象小结
2013/12/20 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
新闻编辑专业自荐信
2014/07/02 职场文书
个人授权委托书格式
2014/08/30 职场文书
质量主管工作职责
2014/09/26 职场文书
语文复习计划
2015/01/19 职场文书
学生个人总结范文
2015/02/15 职场文书
工作调动申请报告
2015/05/18 职场文书
校运会班级霸气口号
2015/12/24 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
python开发制作好看的时钟效果
2022/05/02 Python