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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
需要注意的几个PHP漏洞小结
2012/02/05 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python变量类型知识点总结
2019/02/18 Python
python查看数据类型的方法
2019/10/12 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
网络教育自我鉴定
2013/11/01 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
房地产融资计划书
2014/01/10 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
军训考核自我鉴定
2014/02/13 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
地理科学专业自荐信
2014/09/01 职场文书
在职员工证明书
2014/09/19 职场文书
2014年党员整改措施
2014/10/24 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python