JS实现超炫网页烟花动画效果的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了JS实现超炫网页烟花动画效果的方法。分享给大家供大家参考。具体分析如下:

非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来

<!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>超炫网页烟花效果</title>

</head>

<style type="text/css">

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

body{overflow:hidden; background:#000}

html{overflow:hidden; background:#000}

</style>

<body>

</body>

<script type="text/javascript">

var Fire = function(r, color) {

this.radius = r || 12;

this.color = color;

this.xpos = 0;

this.ypos = 0;

this.zpos = 0;

this.vx = 0;

this.vy = 0;

this.vz = 0;

this.mass = 1;

this.x =0;

this.y=0;

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

this.p.className = "fire";

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 = 150;

var fl = 250;

var vpx = 500;

var vpy = 300;

var gravity = .5;

var floor = 200;

var bounce = -.8;

var timer;

var wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;

var wpos = 0;

var wcount;

return {

init: function() {

wcount = 50 + Math.floor(Math.random() * 100);

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.vz = Math.random() * 6 - 3;

fire.vx = (Math.random()*2 - 1)*2 ;

fire.vy = Math.random()*-15 - 15;

fire.x = 500

fire.y = 600;

fire.append(document.body);

}

var that = this;

timer = setInterval(function() {

wpos++;

if (wpos >= wcount) {

wpos = 0;

wcount = 50 + Math.floor(Math.random() * 100);

wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;

}

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

that.move(fires[i]);

}

}, 30);

},

move: function(fire) {

fire.vy += gravity;

fire.x += fire.vx;

fire.y += fire.vy;

fire.vx += wind;

fire.setPosition(fire.x, fire.y);

if (fire.x < 0 || fire.x >1000 || fire.y  < 0 || fire.y  > 600) {

fire.vx = (Math.random()*2 - 1)*2;

fire.vy = Math.random()*-15 - 15;

fire.x = 500;

fire.y = 600;

fire.setPosition(fire.x, fire.y);

}

}

}

}

fireworks().init();

</script>

</html>

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

Javascript 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 #Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 #Javascript
JavaScript日期类型的一些用法介绍
Mar 02 #Javascript
了解Javascript的模块化开发
Mar 02 #Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 #Javascript
js实现图片漂浮效果的方法
Mar 02 #Javascript
ECMAScript 5中的属性描述符详解
Mar 02 #Javascript
You might like
php 将excel导入mysql
2009/11/09 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
vue.js的提示组件
2017/03/02 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python中的引用知识点总结
2019/05/20 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
简单的Python人脸识别系统
2020/07/14 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
如何用Python徒手写线性回归
2021/01/25 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
电气技术员岗位职责
2013/11/19 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
社区志愿者活动总结
2014/06/26 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2014年度工作总结报告
2014/12/15 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2015年女工委工作总结
2015/07/27 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
python神经网络Xception模型
2022/05/06 Python