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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
js中typeof的用法汇总
Dec 12 Javascript
js实现圆盘记速表
Aug 03 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
JavaScript实现图片轮播特效
Oct 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
ThinkPHP写第一个模块应用
2012/02/20 PHP
php事务处理实例详解
2014/07/11 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
PHP 裁剪图片
2021/03/09 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python内存管理机制原理详解
2019/08/12 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
园林技术个人的自我评价
2014/01/08 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
建国大业观后感600字
2015/06/01 职场文书
高质量“欢迎词”
2019/04/03 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis