js實現煙花特效
阿新 • • 發佈：2020-03-03
本文例項為大家分享了js實現煙花特效的具體程式碼，供大家參考，具體內容如下
1.概述
在網頁背景中實現滑鼠點擊出現模擬煙花爆炸的特效
2.思路
1.獲取滑鼠點選位置，底端建立煙花節點。
2.為煙花新增css屬性，煙花節點從下至上運動。
3.運動至滑鼠位置時移除煙花節點，同時生成多個煙花碎片。
4.為不同的煙花碎片隨機生成不同的顏色、運動速度、運動方向。
5.煙花碎片超出螢幕顯示部分時移除。
3.程式碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,body {
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
}
</style>
</head>
<body>
<script src="move.js"></script>
<script>
class Firework {
constructor(x,y) {//x,y滑鼠的位置
this.x = x;//將水平位置賦值給this.x屬性。
this.y = y;//將垂直位置賦值給this.y屬性。
this.ch = document.documentElement.clientHeight;//可視區的高度
}
init() {
//1.建立煙花節點。
this.firebox = document.createElement('div');
this.firebox.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${this.ch}px;`;
document.body.appendChild(this.firebox);
this.firemove();//建立完成，直接運動。
}
//2.煙花節點運動
firemove() {
bufferMove(this.firebox,{ top: this.y },() => {
document.body.removeChild(this.firebox);
//當煙花節點消失的時候，建立煙花碎片
this.createfires()
});
}
//3.當前滑鼠點選的位置，隨機產生30-60個盒子。(隨機顏色)
createfires() {
for (let i = 1; i <= this.rannum(30,60); i++) {
this.fires = document.createElement('div');
this.fires.style.cssText = `width:5px;height:5px;background:rgb(${this.rannum(0,255)},${this.rannum(0,255)});position:absolute;left:${this.x}px;top:${this.y}px;`;
document.body.appendChild(this.fires);
this.fireboom(this.fires);//設計成一個一個運動，等到迴圈結束，出現整體結果。
}
}
//4.煙花碎片運動。
fireboom(obj) {
//儲存當前obj的初始值。
let initx = this.x;
let inity = this.y;
//隨機產生速度(水平和垂直方向都是隨機的,符號也是隨機的)。
let speedx = parseInt((Math.random() > 0.5 ? '-' : '') + this.rannum(1,15));
let speedy = parseInt((Math.random() > 0.5 ? '-' : '') + this.rannum(1,15));
obj.timer = setInterval(() => {
initx += speedx;
inity += speedy++; //模擬重力加速度(垂直方向比水平方向快一些)
if (inity >= this.ch) {
document.body.removeChild(obj);
clearInterval(obj.timer);
}
obj.style.left = initx + 'px';
obj.style.top = inity + 'px';
},1000 / 60);
}
//隨機區間數
rannum(min,max) {
return Math.round(Math.random() * (max - min) + min);
}
}
document.onclick = function (ev) {
var ev = ev || window.event;
//ev.clientX,ev.clientY//獲取的滑鼠的位置
new Firework(ev.clientX,ev.clientY).init();
}
</script>
</body>
</html>4.Move.js
function getStyle(obj,attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj)[attr];
} else {
return obj.currentStyle[attr];
}
}
function bufferMove(obj,json,fn) {
let speed = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var attr in json) {
var currentValue = null;
if (attr === 'opacity') {
currentValue = Math.round(getStyle(obj,attr) * 100);
} else {
currentValue = parseInt(getStyle(obj,attr));
}
speed = (json[attr] - currentValue) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (currentValue !== json[attr]) {
if (attr === 'opacity') {
obj.style.opacity = (currentValue + speed) / 100;
obj.style.filter = 'alpha(opacity=' + (currentValue + speed) + ')';//IE
} else {
obj.style[attr] = currentValue + speed + 'px';
}
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
fn && typeof fn === 'function' && fn();
}
},10);
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。