js实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码，供大家参考，具体内容如下

1.概述

在网页背景中实现鼠标点击出现模拟烟花爆炸的特效

2.思路

1.获取鼠标点击位置，底端创建烟花节点。
2.为烟花添加css属性，烟花节点从下至上运动。
3.运动至鼠标位置时移除烟花节点，同时生成多个烟花碎片。
4.为不同的烟花碎片随机生成不同的颜色、运动速度、运动方向。
5.烟花碎片超出屏幕显示部分时移除。

3.代码部分

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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。