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_09_Function与Object
Oct 16 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
Nuxt的路由动画效果案例
Nov 06 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP Stream_*系列函数
2010/08/01 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
js实现随机数小游戏
2019/06/28 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
Python实现二分法算法实例
2015/02/02 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python实现按长宽比缩放图片
2018/06/07 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
个人自我鉴定范文
2013/10/04 职场文书
保送生自荐信范文
2013/10/06 职场文书
人力资源专业推荐信
2013/11/29 职场文书
绿色环保演讲稿
2014/05/10 职场文书
节约用水演讲稿
2014/05/21 职场文书
英文版辞职信
2015/02/28 职场文书
出国导师推荐信
2015/03/25 职场文书
简爱读书笔记
2015/06/26 职场文书
交通安全教育主题班会
2015/08/12 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书