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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
JS数组转字符串实现方法解析
Sep 04 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
Protoss魔法科技
2020/03/14 星际争霸
组合算法的PHP解答方法
2012/02/04 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python 消费 kafka 数据教程
2019/12/21 Python
python实现简单井字棋游戏
2020/03/04 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
旷课检讨书3000字
2014/02/04 职场文书
洗手间标语
2014/06/23 职场文书
Python实现byte转integer
2021/06/03 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers