基于Html+CSS+JS实现手动放烟花效果

目录
  • 效果展示
  • 实现代码
    • Html
    • Css
    • JavaScript

雷迪森安的乡亲们,欢迎来到老实人的前端课堂,上次写了一个新春小盲盒,这大过年的,我把烟花都给你们准备好了,今天我们来写个小烟花吧。

效果展示

注意看有两种模式哦,可以自由切换,鼠标点哪里哪里有烟花,还可以自动放烟花

视频演示:html+css写一个烟花,源码请你直接拿走!

实现代码

Html

  <div id="tips">
    <a id="manual" href="javascript:;" rel="external nofollow"  rel="external nofollow" >手动放烟花</a>
    <a id="auto" href="javascript:;" rel="external nofollow"  rel="external nofollow" >自动放烟花</a>
  </div>

Css

以下样式大部分是js代码渲染上dom后表现出来的

    html,
    body {
      overflow: hidden;
    }

    body,
    div,
    p {
      margin: 0;
      padding: 0;
    }

    body {
      background: #000;
      font: 12px/1.5 arial;
      color: #7A7A7A;
    }

    a {
      text-decoration: none;
      outline: none;
    }

    #tips,
    #copyright {
      position: absolute;
      width: 100%;
      height: 50px;
      text-align: center;
      background: #171717;
      border: 2px solid #484848;
    }

    #tips {
      top: 0;
      border-width: 0 0 2px;
    }

    #tips a {
      font: 14px/30px arial;
      color: #FFF;
      background: #F06;
      display: inline-block;
      margin: 10px 5px 0;
      padding: 0 15px;
      border-radius: 15px;
    }

    #tips a.active {
      background: #FE0000;
    }

    #copyright {
      bottom: 0;
      line-height: 50px;
      border-width: 2px 0 0;
    }

    #copyright a {
      color: #FFF;
      background: #7A7A7A;
      padding: 2px 5px;
      border-radius: 10px;
    }

    #copyright a:hover {
      background: #F90;
    }

    p {
      position: absolute;
      top: 55px;
      width: 100%;
      text-align: center;
    }

JavaScript

  var fgm = {
    on: function (element, type, handler) {
      return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
    },
    un: function (element, type, handler) {
      return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler)
    },
    bind: function (object, handler) {
      return function () {
        return handler.apply(object, arguments)
      }
    },
    randomRange: function (lower, upper) { //产生范围在lower~upper的随机数
      return Math.floor(Math.random() * (upper - lower + 1) + lower)
    },
    getRanColor: function () { //随机获得十六进制颜色
      var str = this.randomRange(0, 0xFFFFFF).toString(16);
      while (str.length < 6) str = "0" + str;
      return "#" + str
    }
  };
  //初始化对象
  function FireWorks() {
    this.type = 0;
    this.timer = null;
    this.fnManual = fgm.bind(this, this.manual)
  }
  FireWorks.prototype = {
    initialize: function () {
      clearTimeout(this.timer);
      fgm.un(document, "click", this.fnManual);
      switch (this.type) {
        case 1:
          fgm.on(document, "click", this.fnManual);
          break;
        case 2:
          this.auto();
          break;
      };
    },
    manual: function (event) {
      event = event || window.event;
      this.__create__({
        x: event.clientX,
        y: event.clientY
      });
    },

    auto: function () {
      var that = this;
      that.timer = setTimeout(function () {
        that.__create__({
          x: fgm.randomRange(50, document.documentElement.clientWidth - 50),
          y: fgm.randomRange(50, document.documentElement.clientHeight - 150)
        })
        that.auto();
      }, fgm.randomRange(900, 1100))
    },
    __create__: function (param) {
      //param即鼠标点击点(即烟花爆炸点)
      var that = this;
      var oEntity = null;
      var oChip = null;
      var aChip = [];
      var timer = null;
      var oFrag = document.createDocumentFragment();

      oEntity = document.createElement("div");
      with (oEntity.style) { //烟花上升过程实体初始化
        position = "absolute";
        //初始位置距网页顶部为:整个网页的高度(处于网页底部)
        top = document.documentElement.clientHeight + "px";
        left = param.x + "px";
        width = "4px";
        height = "30px";
        borderRadius = "4px";
        background = fgm.getRanColor();
      };
      document.body.appendChild(oEntity);
      //window.setInterval方法 该方法使得一个函数每隔固定时间被调用一次
      //                console.log(param.y);
      oEntity.timer = setInterval(function () {
        //                    console.log(oEntity.offsetTop);
        //                    console.log(oEntity.style.top);
        oEntity.style.top = oEntity.offsetTop - 20 + "px";
        //判断烟花是否上升到或者第一次超过上次鼠标点击位置
        if (oEntity.offsetTop <= param.y) {
          //烟花爆炸
          clearInterval(oEntity.timer);
          document.body.removeChild(oEntity);
          (function () {
            //在50-100之间随机生成碎片
            //由于IE浏览器处理效率低, 随机范围缩小至20-30
            //自动放烟花时, 随机范围缩小至20-30
            var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100)
            //产生所有烟花爆炸颗粒实体
            for (i = 0; i < len; i++) {
              //烟花颗粒形态实体
              oChip = document.createElement("div");
              with (oChip.style) {
                position = "absolute";
                top = param.y + "px";
                left = param.x + "px";
                width = "4px";
                height = "4px";
                overflow = "hidden";
                borderRadius = "4px";
                background = fgm.getRanColor();
              };
              oChip.speedX = fgm.randomRange(-20, 20);
              oChip.speedY = fgm.randomRange(-20, 20);
              oFrag.appendChild(oChip);
              aChip[i] = oChip
            };
            document.body.appendChild(oFrag);
            timer = setInterval(function () {
              for (i = 0; i < aChip.length; i++) {
                var obj = aChip[i];
                with (obj.style) {
                  top = obj.offsetTop + obj.speedY + "px";
                  left = obj.offsetLeft + obj.speedX + "px";
                };
                obj.speedY++;
                //判断烟花爆炸颗粒是否掉落至窗体之外,为真则remove
                //splice() 方法可删除从 index 处开始的零个或多个元素
                (obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))
              };
              //判断烟花爆炸颗粒是否全部remove,为真则clearInterval(timer);
              !aChip[0] && clearInterval(timer);
            }, 30)
          })()
        }
      }, 30)
    }
  };

  fgm.on(window, "load", function () {
    var oTips = document.getElementById("tips");
    var aBtn = oTips.getElementsByTagName("a");
    var oFireWorks = new FireWorks();

    fgm.on(oTips, "click", function (event) {
      var oEvent = event || window.event;
      var oTarget = oEvent.target || oEvent.srcElement;
      var i = 0;
      if (oTarget.tagName.toUpperCase() == "A") {
        for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
        switch (oTarget.id) {
          case "manual":
            oFireWorks.type = 1;
            break;
          case "auto":
            oFireWorks.type = 2;
            break;
          case "stop":
            oFireWorks.type = 0;
            break;
        }
        oFireWorks.initialize();
        oTarget.className = "active";
        //阻止浏览器默认的事件冒泡行为
        oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true
      }
    });
  });
  fgm.on(document, "contextmenu", function (event) {
    var oEvent = event || window.event;
    oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false
  });

关键代码,满满注释哦,这我可够意思了哈,不懂的话再私下问我吧。

到此这篇关于基于Html+CSS+JS实现手动放烟花效果的文章就介绍到这了,更多相关JS放烟花内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript实现烟花特效(面向对象)

    本文实例为大家分享了JavaScript实现烟花特效的具体代码,供大家参考,具体内容如下 本特效使用面向对象编程 分析 OOA 点击触发事件 烟花运动分成两个阶段 向上飞          爆炸 OOD class FireWork{ constructor(){ } bindEvent(){ let _this = this; ele.onclick = function(){ //fly结束再去调用boom函数 _this.fly(_this.boom); } } fly(boom){ }

  • js实现点击烟花特效

    代码: <script type="text/javascript"> function clickEffect() { let balls = []; let longPressed = false; let longPress; let multiplier = 0; let width, height; let origin; let normal; let ctx; const colours = ["#F73859", "#14FFE

  • JavaScript实现五种不同烟花特效

    目录 一.简单大气的烟花 二.在农村看到的烟花 三.可点击的烟花 四.3D旋转烟花 五.可拖动视角的自定义烟花 一.简单大气的烟花 演示地址:http://haiyong.site/fireworks1 HTML代码: 这里的HTML代码很简短 <div> <canvas id="canvas"></canvas> </div> CSS代码 css也只有这两段内容 body{ background:black; overflow:hidd

  • JavaScript实现烟花和福字特效

    目录 超能力一:放烟花 超能力二:写福字 隐藏能力:只有程序员能看懂的祝福 虎虎生威.虎年大吉. 事事都如意,虎虎有生气…… 都2022了你还在从网上复制粘贴这些2002年就烂大街的四句成语群发给你的亲朋好友? 不会吧不会吧,这也太敷衍了吧? 在这个辞旧迎新的美好时刻,一恩姐姐教你如何通过代码放烟花,写春联.用程序员特有的超能力 “卷死” 别人家的孩子们. 超能力一:放烟花 先带大家看看实现后超级酷炫的3D烟花效果图. 怎么样,是不是瞬间逼格暴涨?话不多说,着手整活: 在电脑上创建一个文本文档,

  • JavaScript实现带音效的烟花特效

    花了半个小时写的代码,这个html5 canvas新年烟花一定不会让大家失望! 首先我们看下静态的效果图: 文章末尾有动态的效果图,滑动即可看到!  JavaScript代码如下: $(function() { var canvas = $('#canvas')[0]; canvas.width = $(window).width(); canvas.height = $(window).height(); var ctx = canvas.getContext('2d'); // resize

  • JavaScript实现烟花绽放动画效果

    先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Firework用于表示一个烟花对象,Particle用于表示一个烟花炸开后的各碎片. Firework对象类定义6个属性:表示烟花上升轨迹中各点的坐标(x,y).烟花弧状轨迹的偏转角度angle.上升阶段水平和垂直方向的位移改变量xSpeed和ySpeed.烟花的色彩色相hue. 坐标属性值y的初始值

  • js实现炫酷的烟花效果

    本文实例为大家分享了js实现炫酷的烟花效果的具体代码,供大家参考,具体内容如下 我们要理清整个流程的思路. 首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一份飞上天,然后再分散成很多个小烟花,并且每一个小烟花都有不同的样式以及运动方式. 所有整体思路就是先建立一个div作为我们的大烟花,当大烟花运动到我们鼠标点击的位置的时候,大烟花就会消失,然后就会产生更多的小烟花,并且这些小烟花的运动轨迹样式各不相同. 1.建立一块画布(div)用于展示烟花的效

  • 基于Html+CSS+JS实现手动放烟花效果

    目录 效果展示 实现代码 Html Css JavaScript 雷迪森安的乡亲们,欢迎来到老实人的前端课堂,上次写了一个新春小盲盒,这大过年的,我把烟花都给你们准备好了,今天我们来写个小烟花吧. 效果展示 注意看有两种模式哦,可以自由切换,鼠标点哪里哪里有烟花,还可以自动放烟花 视频演示:html+css写一个烟花,源码请你直接拿走! 实现代码 Html <div id="tips"> <a id="manual" href="java

  • JS基于面向对象实现的放烟花效果

    本文实例讲述了JS基于面向对象实现的放烟花效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • 基于JS绘制2021的烟花效果 附源码下载

    该作品是运用到了前端开发的知识内容(JS内容),但是运用到了前段比较后面的知识了,该作品可以用做网页设计的背景是一个不错的选择,以下式该程序运行的效果图,HTML,CSS中多部分的运用与设置,就是单词的字面意思 以下是该作品呈现的效果图: 调用JS使用时,JS里面的内容不需要做过多的研究与了解,只需给你一个JS文件会调用即可,但是HTML,CSS的内容中的至少的单词要知道意思与会运用,以下是HTML部分中的代码(主要还是调用后缀为JS的文件里的内容) <!DOCTYPE html> <h

  • 基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&

  • 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

  • 基于HTML+CSS+JS实现纸牌记忆游戏

    目录 知识点 HTML 用户界面 CSS 部分 一些基本样式 纸牌的样式 分数面板的样式 祝贺面板的样式 动画 媒体查询 JavaScript 部分 洗牌功能 开始新游戏的功能 显示卡片的功能 当卡片匹配时的功能 当卡片不匹配时的功能 暂时禁用卡片的功能 启用卡片并禁用匹配的卡片的功能 计算玩家的动作的功能 显示游戏的时间 再次游戏功能 总结 这节实验我们将使用 HTML.CSS 和 JavaScript 制作纸牌记忆游戏. 让我们开始吧! 在线演示戳这里 知识点 animation-durat

  • 基于原生CSS+JS实现一个标签输入框

    目录 一.自适应输入框布局 二.输入框占位提示 三.标签的输入与删除 四.选择框架还是原生 最近在项目中需要做一个标签输入框,还挺实用的,演示效果如下: 主要交互要求是这样的: 点击输入框可以输入内容. 按回车可以生成标签. 按退格键可以删除标签. 点击标签上的关闭按钮可以删除标签. 习惯了各种 react 框架或者UI库,大家有多久没接触没有原生开发了呢?有时候页面比较简单,没必要引入一个完整的框架,原生实现就完全满足了,一起看看吧! 一.自适应输入框布局 不管什么组件,布局都是最重要的.这个

  • 基于html+css+js实现简易计算器代码实例

    使用html+css+js实现简易计算器, 效果图如下: html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http

  • 用CSS+JS实现的进度条效果效果

    进度条,就是在用户进入你的网站的时候,能让用户看到网页下载了多少,这个的作用非常明显---就是让用户的等待时间变长,可以有效的弥补空间慢的缺点(当然,你空间太慢,还是建议你换下空间,呵呵) 好了,现在我先来举两个例子 一个是用FLASH实现的 (这个网上很多网站都是,不说了) 一个是用动态的GIF实现的 (这个你可以看微软官方的下载页面,也不说了) 这里,我们的重点是用 CSS+JS 实现这个效果 好了,废话不多说,我们开始 首先,写一段HTML代码 <div id="loading&qu

  • css js 图片压缩批处理命令(基于YUI Compressor)

    复制代码 代码如下: @echo off ::设置YUI Compressor启动目录 SET YUIFOLDER=D:\yuicompressor-2.4.2\build\ ::设置你的JS和CSS根目录,脚本会自动按树层次查找和压缩所有的JS和CSS SET INFOLDER=D:\jscss\src SET OUTFOLDER=D:\jscss\build echo 正在查找 JavaScript, CSS ... chdir /d %INFOLDER% for /r . %%a in (

随机推荐

其他