使用JavaScript怎么实现一个烟花特效

这篇文章给大家介绍使用JavaScript怎么实现一个烟花特效，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、网页空间、营销软件、网站建设、仁寿网站维护、网站推广。

思路

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

关于使用JavaScript怎么实现一个烟花特效就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。