DDR爱好者之家

js实现烟花特效
站长资源 2024/11/26 佚名
72 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了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="/UploadFiles/2021-04-02/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);
}





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米