<!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. 【ARM-Linux开发】Linux链接

    链接有两种方式:硬链接和软链接. (一)软链接 软链接又叫做符号链接.基本命令为: [plain] view plain copy ln -s sourcePlace newPlace 软链接可以链接 ...

  2. Linux 系统信息查询大全

    Linux常用系统命令 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /etc/redhat-release ...

  3. Linux安装zookeeper集群

    一．单机部署: ①下载.解压 http://archive.apache.org/dist/zookeeper/ tar -zxf zookeeper-3.4.10.tar.gz -C /usr/lo ...

  4. Double write Buffer的配置

    InnoDB和XtraDB使用称为doublewrite缓冲区的特殊功能来提供数据损坏的强大保证.想法是在写入数据文件之前将数据写入主表空间中的顺序日志.如果发生部分页面写入(换句话说,写入损坏),I ...

  5. 【AtCoder】AGC008

    AGC008 A - Simple Calculator 如果符号相同,那么如果y比x大直接走,否则需要两次反号 如果符号不同,需要绝对值的差加一次反号 如果有一个是0,且y比x要小,那只需要一次反号 ...

  6. Eureka【支持Remote Region】

    工程公共pom依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncod ...

  7. vs code 更改快捷键

    选择左下角设置图标,快捷键方式 文件列表修改,搜 list 文件tree list.focusUp -> ctrl+p

  8. 文件锁-fcntl flock lockf

    这三个函数的作用都是给文件加锁,那它们有什么区别呢? 首先flock和fcntl是系统调用,而lockf是库函数.lockf实际上是fcntl的封装,所以lockf和fcntl的底层实现是一样的,对文 ...

  9. selenium登录百度

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.s ...

  10. Python学习3——列表和元组

    一.通用序列操作——索引.切片.相加.相乘.成员资格检查 1.索引,正序从0开始为第一个元素,逆序从-1开始,-1为最后一个元素 >>> greeting[0] 'h' >&g ...