1. 程式人生 > 程式設計 >基於Html+CSS+JS實現手動放煙花效果

基於Html+CSS+JS實現手動放煙花效果

目錄
  • 效果展示
  • 實現程式碼
    • Html

雷迪森安的鄉親們,歡迎來到老實人的前端課堂,上次寫了一個新春小盲盒,這大過年的,我把煙花都給你們準備好了,今天我們來寫個小煙花吧。

效果展示

注意看有兩種模式哦,可以自由切換,滑鼠點哪裡哪裡有煙花,還可以自動放煙花

視訊演示:html+css寫一個煙花,原始碼請你直接拿走!

基於Html+CSS+JS實現手動放煙花效果

實現程式碼

Html

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

Css

以下樣式大部分是程式碼渲染上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,handler) {
      return element.removeEventListener ? element.removeEventListener(type,false) : element.detachEvent("on" + type,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,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)
            //產生所有煙daKQe
花爆炸顆粒實體 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 =daKQe "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.www.cppcns.comclientHeight || 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(oTidaKQeps,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放煙花內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!