<!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>

js动画fireworks烟花的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  5. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  6. [学习笔记]js动画实现方法，作用域，闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  7. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  8. js动画（四）

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  9. css动画特效与js动画特效（一）------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

随机推荐

  1. 重置fedora root密码

    本方法适用于fedora16(含)以上(使用GRUB2) 步骤如下: Step 1:系统菜单,在linux上按“e”键进行编辑 Step 2:使用上下键找到以字符串“linux”或“linux16”( ...

  2. input输入框内容变化实时监听

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入 ...

  3. Python解Leetcode： 724. Find Pivot Index

    leetcode 724. Find Pivot Index 题目描述:在数组中找到一个值,使得该值两边所有值的和相等.如果值存在,返回该值的索引,否则返回-1 思路:遍历两遍数组,第一遍求出数组的和 ...

  4. Ubuntu18突然卡死解决方法

    emmmm 1.Ctrl+Alt+F2/F3/F4/F5/F6     F2-6随便选一个都可以 2.进入tty终端后先输入用户名和密码(记得小键盘会自动

  5. （十五）mybatis 逆向工程

    目录 为什么需要逆向工程 使用方法 如何读懂生成的代码 总结 为什么需要逆向工程 对于数据库中的那么多的表 ,基本的 CRUD 操作 ,以及 mybatis 需要使用的 接口.mapper ,这些工作 ...

  6. （六）Spring 中的 JdbcTemplate

    目录 概念 配置数据库 创建 JdbcTemplate 对象 增删改查代码 概念 JdbcTemplate : 是 Spring 中对持久层(JDBC 技术)一个封装 : 使用起来和 Dbutuis ...

  7. ios 输入框失去焦点，位置回调方法

    微信网页开发,ios 在input,textarea 失去焦点后,页面无法回调. 以下方法可解决: $("input,textarea").on("blur", ...

  8. python学习-1 编程语言的介绍

    1.开发语言: 高级语言:Java.python.C#.PHP.Go.ruby.C++等等 低级语言:C.汇编语言 2.机器码和字节码 高级语言 ====>字节码 低级语言===>机器码 ...

  9. python中sort和sorted用法的区别

    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列 一,最简单的排序 1.使用sort排序 my_list = [3 ...

  10. js之数据类型（对象类型——构造器对象——正则）

    正则(regular expression)描述了一种字符串的匹配式.一般应用在一些方法中,用一些特殊的符号去代表一些特定的内容,对字符串中的信息实现查找,替换,和提取的操作.js中的正则表达式用Re ...