JS实现放烟花效果
更新时间：2020年03月10日 13:59:41 作者：玉米_欣
这篇文章主要为大家详细介绍了JS实现放烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现放烟花效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放烟花——欣欣博客</title>
<style>
html,body{overflow:hidden;}
body,div,p{margin:0;padding:0;}
body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
.fire {
width: 3px;
height: 30px;
background: white;
position: absolute;
}
.spark {
position: absolute;
width: 6px;
height: 6px;
}
</style>
<script src="move.js"></script>
<script>
οnlοad=function(){
document.οnclick=function(e){
e =e||event;
var coord ={
x:e.clientX,
y:e.clientY
};
new Fire(coord).init().launch();
}
function Fire(coord){
var self = this;
//初始化
this.init=function(){
this.ball = document.createElement("div");
this.ball.className="fire";
this.ball.style.left = coord.x+"px";
this.ball.style.top= window.innerHeight +"px";
document.body.appendChild(this.ball);
return this;
}
//发射
this.launch=function(){
animate(this.ball,{left:coord.x,top:coord.y,height:3},{callback:function(){
self.explode();
}});
return this;
}
//爆炸
this.explode=function(){
this.destory();
var count = randomInt(30,50);
for(var i =0;i<count;i++){
new Spark(coord).init().parabola();
}
}
//销毁
this.destory = function(){
this.ball.remove();
}
}
function Spark(coord){
var self = this;
this.init=function(){
this.box = document.createElement("div");
this.box.className="spark";
this.box.style.backgroundColor="#"+randomColor();
console.log(this.box.style.backgroundColor)
this.box.style.left = coord.x+"px";
this.box.style.top = coord.y+"px";
this.box.speedX = randomInt(-20,20);
this.box.speedY = randomInt(-20,10);
document.body.appendChild(this.box);
return this;
}
this.parabola=function(){
this.timer =setInterval(function(){
if(self.box.offsetTop >window.innerHeight){
clearInterval(self.timer);
self.destroy();
return;
}
self.box.style.left = self.box.offsetLeft + self.box.speedX +"px";
self.box.style.top = self.box.offsetTop +self.box.speedY++ +"px";
},30)
}
this.destory=function(){
this.box.remove();
}
}
//随机整数
function randomInt(min,max){
return Math.round(Math.random()*(max-min)+min);
}
//随机颜色
function randomColor(){
var R = Math.round( Math.random()*255 ).toString(16);
var G = Math.round( Math.random()*255 ).toString(16);
var B = Math.round( Math.random()*255 ).toString(16);
return (R.length<2?"0"+R:R) + (G.length<2?"0"+G:G)+ (B.length<2?"0"+B:B);
}
}
</script>
</head>
<body>
</body>
</html>
move.js
/**
*
* @param {Object} obj 目标对象
* @param {Object} json 要改变的属性
* @param {Object} extend {buffer,callback} 当buffer为true时为弹性运动
* callback会在运动结束时，被执行
* animate(obj, {top:500, left: 300}, {callback:function(){}, buffer: true})
*/
function animate(obj, json, extend){
extend = extend || {};
if(obj.isMoving){
return;
} else {
stop();
obj.isMoving = true;
}
//obj = Object.assgin(obj,extend);
obj.buffer = extend.buffer;
obj.callback = extend.callback;
obj.timerlist = {};
//为每一个属性添加一个定时器
for(var attr in json){
(function(attr){
obj.timerlist[attr] = {speed:0};
obj.timerlist[attr].timer = setInterval(function(){
//首先得到当前值
var iNow = 0;
if(attr == "opacity"){
iNow = getStyle(obj, attr) * 100;
} else {
iNow = getStyle(obj, attr);
}
var speed = obj.timerlist[attr].speed;
//根据目标值，计算需要的速度
if(obj.buffer==true){
speed += (json[attr] - iNow)/5;
speed *= 0.75;
} else {
speed = (json[attr] - iNow)/5;
}
//当无限接近目标值时，停止定时器
if(Math.abs(iNow - json[attr]) < 0.5){
clearInterval(obj.timerlist[attr].timer);
delete obj.timerlist[attr];
if(getObjLength(obj.timerlist)==0){//所有定时器已停止
stop();
obj.callback ? obj.callback() : "";
}
} else {
//根据速度，修改当前值
if(attr == "opacity"){
obj.style.opacity = (iNow+speed)/100;
obj.style.filter = 'alpha(opacity=' + parseFloat(iNow+speed) + ')';
} else {
obj.style[attr] = iNow+speed+"px";
}
obj.timerlist[attr].speed = speed;
}
}, 30);
})(attr);
}
function clearTimer(){
for(var i in obj.timerlist){
clearInterval(obj.timerlist[i]);
}
}
function getStyle(obj, attr){
if(obj.currentStyle){
return isNaN(parseFloat(obj.currentStyle[attr])) ? obj.style[attr]=0 : parseFloat(obj.currentStyle[attr]);
} else {
return isNaN(parseFloat(getComputedStyle(obj, null)[attr])) ? obj.style[attr]=0 : parseFloat(getComputedStyle(obj, null)[attr]);
}
}
function getObjLength(obj){
var n = 0;
for(var i in obj){
n++;
}
return n;
}
function stop(){
clearTimer();//清除所有定时器
obj.isMoving = false;
}
}
更多JavaScript精彩特效分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS使用reduce()方法处理树形结构数据，对树形结构数据感兴趣的同学，可以参考下2021-05-05
这篇文章主要为大家介绍了webpack loader使用的安装配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了JavaScript中两种类型的全局对象/函数。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了详解ES6中的三种异步解决方案，详细的介绍了这三种方案的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
javascript下有关dom以及xml节点访问兼容问题...2007-11-11
这篇文章主要为大家详细介绍了js+html5实现侧滑页面效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了JS表的模拟方法,涉及javascript模拟表的生成、添加与删除节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了Ant Design Pro 下实现文件下载的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法
写微信小程序的时候,难免会为了赶进度而直接使用本地的图片,在模拟器上的时候可以正确显示图片,但是到手机上就无法显示图片了,下面这篇文章主要给大家介绍了关于uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的方法,需要的朋友可以参考下2022-12-12
在JavaScript中，Map 和 Object 看起来都是用键值对来存储数据，那么他们有什么不同呢，这篇文章主要介绍了JavaScript Map 和 Object 的区别,需要的朋友可以参考下2022-08-08
最新评论