Javascript实现多彩雪花从天降散落效果的方法


Posted in Javascript onFebruary 02, 2015

本文实例讲述了Javascript实现多彩雪花从天降散落效果的方法。分享给大家供大家参考。具体分析如下:

先来看看运行效果,如下图所示:

Javascript实现多彩雪花从天降散落效果的方法

完整源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Javascript多彩雪花从天降</title>

<style type="text/css">

.3waterSnow{display:block; overflow:hidden; font-size:12px; position:absolute};

body{background:#000;margin:0px}

html{overflow:hidden; background:#000;}

a{color:White;text-decoration:none}

.3waterTitle{color:red;height:140px;width:800px;margin:0px auto;text-align:center}

</style>

</head>
<body>
<script type="text/javascript">

var yanhua = "yanhua.3water.com";

var Fire = function (r, color) {

this.radius = r || 12;

this.color = color || "FF6600";

this.xpos = 0;

this.ypos = 0;

this.zpos = 0;

this.vx = 0;

this.vy = 0;

this.vz = 0;

this.mass = 1;

this.p = document.createElement("span");

this.p.className = "jb"+"51Snow";

this.p.innerHTML = "*";

this.p.style.fontSize = this.radius + "px";

this.p.style.color = "#" + this.color;

}

Fire.prototype = {

append: function (parent) {

parent.appendChild(this.p);

},

setSize: function (scale) {

this.p.style.fontSize = this.radius * scale + "px";

},

setPosition: function (x, y) {

this.p.style.left = x + "px";

this.p.style.top = y + "px";

},

setVisible: function (b) {

this.p.style.display = b ? "block" : "none";

}

}

var fireworks = function () {

var fires = new Array();

var count = 100;

var fl = 250;

var vpx = 500;

var vpy = 300;

var gravity = .3;

var floor = 200;

var bounce = -.8;

var timer;

return {

init: function () {

for (var i = 0; i < count; i++) {

var color = 0xFF0000;

color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];

while (color.length < 6) {

color = "0" + color;

}

var fire = new Fire(12, color);

fires.push(fire);

fire.ypos = -100;

fire.vx = Math.random() * 6 - 3;

fire.vy = Math.random() * 6 - 3;

fire.vz = Math.random() * 6 - 3;

fire.append(document.body);

}

var that = this;

timer = setInterval(function () {

for (var i = 0; i < count; i++) {

that.move(fires[i]);

}

}, 30);

},

move: function (fire) {

fire.vy += gravity;

fire.xpos += fire.vx;

fire.ypos += fire.vy;

fire.zpos += fire.vz;

if (fire.ypos > floor) {

fire.ypos = floor;

fire.vy *= bounce;

}

if (fire.zpos > -fl) {

var scale = fl / (fl + fire.zpos);

fire.setSize(scale);

fire.setPosition(vpx + fire.xpos * scale,

vpy + fire.ypos * scale);

fire.setVisible(true);

} else {

fire.setVisible(false);

}

}

}

}

if (yanhua === 'yanhua.jb' + '51.' + 'net')

fireworks().init();
function 3waterSnow() {

window.location.reload();

} if (yanhua === 'yanhua.jb' + '51.' + 'net')

setInterval(3waterSnow, 6000);

</script>
</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript显示用户停留时间的简单实例
Aug 05 Javascript
YUI模块开发原理详解
Nov 18 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 #Javascript
JQuery动画与特效实例分析
Feb 02 #Javascript
Javascript核心读书有感之词法结构
Feb 01 #Javascript
Javascript核心读书有感之语言核心
Feb 01 #Javascript
jQuery功能函数详解
Feb 01 #Javascript
jQuery动画与特效详解
Feb 01 #Javascript
jquery制作 随机弹跳的小球特效
Feb 01 #Javascript
You might like
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
php时间计算相关问题小结
2016/05/09 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
浅谈js闭包理解
2019/04/01 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
python写一个md5解密器示例
2018/02/23 Python
Python多图片合并PDF的方法
2019/01/03 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
有模特经验的简历自我评价
2013/09/19 职场文书
中学教师师德承诺书
2014/05/23 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
医院科室评语
2015/01/04 职场文书
简历自我评价模板
2015/03/11 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
解析目标检测之IoU
2021/06/26 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫