js模拟实现烟花特效
本文实例为大家分享了js实现烟花特效的具体代码，供大家参考，具体内容如下
如下图
首先描绘圆周运动
// d1
/*css*/
div{
height: 4px;
width: 4px;
background: red;
position: absolute;
}
//js
var div = document.getElementById('div'); // 画运动点
document.getElementsByTagName('body')[0].appendChild(tdiv); // 添加节点
var deg = 0; // 运动角度
var r = 100; // 半径
var center = [300, 300] // 圆心
var dd = Math.PI/180; // PI和角度之间的转换
setInterval(function(){
deg++;
div.style.left = center[0] + Math.cos(deg * dd) * r + 'px';
div.style.top = center[1] + Math.sin(deg * dd) * r + 'px';
},16);
以上代码运行后可以看到一个圆周运动红色方块
完成上述步骤后，有什么用呢？
烟花的绽放，想象一下，可以当成很多方块从一个从圆心开始向四周扩算的一种运动方式。
一束烟花，有10个绽放点，那就是每隔360 / 10 = 36度，就有一条运动轨迹。
这样就好办了
// d2
var divs = []; // 保存烟花节点
var len = 10; // 烟花节点个数
var temp = 360 / len; // 运动轨迹所隔角度
for(var i = 0; i < len; i++){
var tdiv = document.createElement('div');
var tr1 = r; // 半径
var deg = i * temp; // 当前轨迹所在的角度值
var left = center[0] + Math.cos(deg * dd) * tr1
var topLen = center[1] + Math.sin(deg * dd) * tr1
tdiv.style.left = left +'px';
tdiv.style.top = topLen +'px';
tdiv.data = { // 存放节点的位置信息
deg : deg,
r : tr1,
left : left,
top : topLen
};
document.getElementsByTagName('body')[0].appendChild(tdiv);
divs.push(tdiv);
}
上述代码运行后可以看到
看起来是有点烟花的意思了，但是烟花的运动轨迹可没这么工整，同一个地点出发，同一个地点结束。
而这个结束点就是半径的长度值，所以只需将半径进行变化就可打乱。
// d3
function getRanR(a,b){ // 随机得到a-b的值
return Math.floor(Math.random()*(b-a+1)+a);
}
将for循环里的 tr1 改为 getRanR(0,200);
就可看到下图
看着很乱，完全没点烟花的样子。没关系，让它运动起来就可以看出来了。
为了让这个动起来就要让上面 d2 的js代码进行修改。让各个节点的起始位置为圆心。同时为了省点力，用css3进行运动。
/*css*/
div{
height: 4px;
width: 4px;
background: red;
position: absolute;
transition: 1s all; // 就添加这一句
}
// js
tdiv.style.left = center[0] +'px';
tdiv.style.top = center[1] +'px';
运动轨迹从 d2 可以看出来已经全部存放到了节点里。用divs可以拿到各个节点。所以只需操作divs就可以了
document.onclick = function () {
for(var i = 0; i < divs.length; i++){
divMove(divs[i])
}
}
function divMove(div){
var data = div.data;
div.style.left = data.left + 'px';
div.style.top = data.top + 'px';
}
运动如下图：
这样就可以看到一个简易的烟花效果。就这么一个简易的烟花连续起来就可达到图1的效果。
所以首先要对这个简易的烟花效果进行封装。
动画方面为了方便操作，所以引入jquery。
以下为html + css
<html>
<head>
<meta charset="utf-8">
<style>
*{
padding: 0;
margin: 0;
}
div.boom-div{
height: 4px;
width: 4px;
background: orange;
position: absolute;
border-radius: 50%;
}
#container{
width: 100%;
height: 100%;
position: relative;
}
.input-container{
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div class="input-container">
<input id="repaint" type="button" value="重绘">
<input id="zero" type="button" value="清零">
<input id="save" type="button" value="保存">
</div>
<div id="container"></div>
</body>
</html>
JS部分
var boom = {
init: function (center, len, container, type) {
this.len = len || 20; // 烟花节点个数
this.maxR = 100; // 最大半径
this.speed = 1500; // 速度
this.divs = []; // 存放烟花节点
this.center = center; // 圆心
this.type = type; // 类型
this.container = container; // 容器
this.paint();
},
getRanR: function (a, b) { // 得到随机数
return Math.floor(Math.random() * (b - a + 1 )+ a);
},
// 画出烟花节点所在点，以及保存去往点信息
// 圆心， 半径， 容器， 类型
paint: function () {
var that = this;
var center = that.center.slice(),
len = that.len,
container = that.container,
type = that.type,
dd = Math.PI / 180,
temp = 360 / len;
for (var i= 0; i < len; i++) {
var div = document.createElement('div');
var deg = i * temp; // 当前轨迹所在的角度值
var cc = []; // 节点的结束点
var tr = that.getRanR(0, that.maxR); // 半径
var left = 0; // 烟花节点所在的位置
var topLen = 0; // 烟花节点所在的位置
var xCenter = center[0],
yCenter = center[1];
if (type) { // 当类型为真时，整个烟花效果就是向外扩张
left = xCenter; // 为假时则是向内收缩，本质一样都是拿到开始点和结束点
topLen = yCenter; // 只是将开始和结束换了个位置
cc = [xCenter + Math.cos(deg * dd) * tr, yCenter + Math.sin(deg * dd) * tr];
} else {
left = xCenter + Math.cos(deg * dd) * tr;
topLen = yCenter + Math.sin(deg * dd) * tr;
cc = [xCenter, yCenter];
}
div.className = 'boom-div';
div.style.left = left + 'px';
div.style.top = topLen + 'px';
div.data = {
left: cc[0], // 节点的结束点
top: cc[1], // 节点的结束点
}
that.divs.push(div);
container.appendChild(div);
}
// 使节点运动起来
that.move();
},
// 运动
move: function () {
var that = this;
var len = that.len,
container = that.container,
divLen = that.divs.length;
for (var i = 0; i < divLen; i++) {
var div = that.divs[i];
$(div).animate({
left: div.data.left,
top: div.data.top,
opacity: 0,
}, that.speed, "linear", function() {
// 运动完结后删除节点
this.parentNode.removeChild(this);
});
}
}
}
控制特效
var container = $('#container')[0];
var arr = []; // 存放鼠标点击位置
var iCount = -1;
$(container).on('mousedown', function(e) {
iCount++;
e = e || window.event;
boom.init([e.clientX, e.clientY], 20,container, 1)
arr[iCount] = []; // 每点击一次，增加一个二位数组
$(container).on('mousemove', function(e) {
e = e || window.event;
boom.init([e.clientX, e.clientY], 20, container, 1)
arr[iCount].push([e.clientX, e.clientY]) // 鼠标每移动一次，添加鼠标位置
})
$(container).on('mouseup', function() {
$(container).off('mousemove')
})
});
// 重绘
$('#repaint').click(function() {
// console.log(arr)
if( !arr.length ){
return;
}
var tempArr= [];
// 将所有点取出来，转换为二维数组
for(var i = 0; i < arr.length; i++){
for(var j = 0; j< arr[i].length; j++){
tempArr.push(arr[i][j])
}
}
var count = 0;
var timmer = setInterval(function(){
if( ++ count >= tempArr.length){
clearInterval(timmer)
}
boom.init(tempArr[count],20,container,1)
},16)
});
$('#zero').click(function(){
iCount=-1;
arr=[]
});
烟花节点可以用背景图代替，比如用小爱心或者五角星啥的，只是大小得适当调整。
更多JavaScript精彩特效分享给大家：
Javascript菜单特效大全
javascript仿QQ特效汇总
JavaScript时钟特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现的简单烟花特效代码
本文实例讲述了JavaScript实现的简单烟花特效代码.分享给大家供大家参考,具体如下: 这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yh-explode-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
非常漂亮的js烟花效果
本文实例为大家分享了js实现漂亮烟花效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>烟花</title> <style type="text/css"> div>div{ width:10px; height:10px; border-radius: 50%; po
-
js实现烟花特效
本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述 在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加css属性,烟花节点从下至上运动. 3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片. 4.为不同的烟花碎片随机生成不同的颜色.运动速度.运动方向. 5.烟花碎片超出屏幕显示部分时移除. 3.代码部分 <!DOCTYPE html> <html lang="en"&g
-
用p5.js制作烟花特效的示例代码
前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的模拟器上. 不过好在也有对应的web扩展语言,有processing.js和p5.js. processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了.为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效. 代码讲解 proces
-
javascript实现超好看的3D烟花特效
本文实例为大家分享了超好看3D烟花的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>3D烟花</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #c
-
JS实现网页烟花动画效果
原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! 效果图: CSS代码: *{ padding: 0px; margin: 0px; background: #000; } .firworks{ width: 6px; height: 6px; position: absolute; } js代码: <script type="text/javascript"> //封装一个颜色随机的效果 function randomColor(){
-
新年快乐! javascript实现超级炫酷的3D烟花特效
本文实例为大家分享了javascript实现3D烟花特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta charset="utf-8"> <title>3D烟花</title> <style> html,b
-
JS实现烟花爆炸效果
本文实例为大家分享了JS实现烟花爆炸的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%;
-
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:#00
-
原生JS实现烟花效果
原生JS实现烟花效果,点击页面生成烟花,向四周扩散,然后再坠落下去.(这里的烟花我是用的特殊字符爱心形状) 基础css代码 /* 设置基础的css样式 */ body{background: #000;overflow: hidden;} .fire{position: absolute;width: 4px;height: 30px;} js代码: 1.给页面添加点击事件,生成主体烟花 //给页面设置点击事件 document.onclick = function(eve){ var e =