欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Html+CSS+JS實現(xiàn)手動放煙花效果

 更新時間:2022年01月23日 16:08:39   作者:前端老實人  
這篇文章主要介紹了利用Html+CSS+JavaScript實現(xiàn)的放煙花效果,文中一共實現(xiàn)了兩種方式:手動和自動,文中的示例代碼講解詳細,感興趣的可以試一試

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

效果展示

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

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

實現(xiàn)代碼

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后表現(xiàn)出來的

    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) { //產(chǎn)生范圍在lower~upper的隨機數(shù)
      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";
        //初始位置距網(wǎng)頁頂部為:整個網(wǎng)頁的高度(處于網(wǎng)頁底部)
        top = document.documentElement.clientHeight + "px";
        left = param.x + "px";
        width = "4px";
        height = "30px";
        borderRadius = "4px";
        background = fgm.getRanColor();
      };
      document.body.appendChild(oEntity);
      //window.setInterval方法 該方法使得一個函數(shù)每隔固定時間被調(diào)用一次
      //                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)
            //產(chǎn)生所有煙花爆炸顆粒實體
            for (i = 0; i < len; i++) {
              //煙花顆粒形態(tà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
  });

關(guān)鍵代碼,滿滿注釋哦,這我可夠意思了哈,不懂的話再私下問我吧。

到此這篇關(guān)于基于Html+CSS+JS實現(xiàn)手動放煙花效果的文章就介紹到這了,更多相關(guān)JS放煙花內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js實現(xiàn)Tab選項卡切換效果

    js實現(xiàn)Tab選項卡切換效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)Tab選項卡切換效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • uniapp封裝小程序雷達圖組件的完整代碼

    uniapp封裝小程序雷達圖組件的完整代碼

    組件是一個單獨且可復(fù)用的功能模塊的封裝,每個組件,包括如下幾個部分:以組件名稱為標記的開始標簽和結(jié)束標簽、組件內(nèi)容、組件屬性、組件屬性值,這篇文章主要給大家介紹了關(guān)于uniapp封裝小程序雷達圖組件的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 微信小程序如何調(diào)用json數(shù)據(jù)接口并解析

    微信小程序如何調(diào)用json數(shù)據(jù)接口并解析

    這篇文章主要介紹了微信小程序如何調(diào)用json數(shù)據(jù)接口并解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-06-06
  • js實現(xiàn)星星海特效的示例

    js實現(xiàn)星星海特效的示例

    這篇文章主要介紹了js實現(xiàn)星星海特效的示例,幫助大家制作網(wǎng)頁特效,感興趣的朋友可以了解下
    2020-09-09
  • 淺談js函數(shù)中的實例對象、類對象、局部變量(局部函數(shù))

    淺談js函數(shù)中的實例對象、類對象、局部變量(局部函數(shù))

    下面小編就為大家?guī)硪黄獪\談js函數(shù)中的實例對象、類對象、局部變量(局部函數(shù))。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • 微信小程序頁面返回傳值的4種解決方案匯總

    微信小程序頁面返回傳值的4種解決方案匯總

    這篇文章主要給大家介紹了關(guān)于微信小程序頁面返回傳值的4種解決方案,小程序開發(fā)中經(jīng)常會遇到這種場景,比如提交問題,然后需要返回之前頁面,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-07-07
  • 一篇文章深入了解JavaScript中的fetch方法

    一篇文章深入了解JavaScript中的fetch方法

    這篇文章主要給大家介紹了關(guān)于JavaScript中fetch方法的相關(guān)資料,JavaScript中的fetch()方法用于向服務(wù)器請求并加載網(wǎng)頁中的信息,請求可以是返回JSON或XML格式數(shù)據(jù)的任何API,需要的朋友可以參考下
    2023-10-10
  • javascript中UMD規(guī)范的代碼推演

    javascript中UMD規(guī)范的代碼推演

    這篇文章給大家分享了javascript中UMD規(guī)范的代碼推演的相關(guān)的知識點內(nèi)容,有興趣的朋友們學(xué)習(xí)下。
    2018-08-08
  • 微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案)

    微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案)

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長按 識別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個屬性就可以了,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友可以參考下
    2024-01-01
  • JS寫的數(shù)字拼圖小游戲代碼[學(xué)習(xí)參考]

    JS寫的數(shù)字拼圖小游戲代碼[學(xué)習(xí)參考]

    昨天沒事做,就用JS寫了個數(shù)字拼圖的小游戲,自娛自樂。 可惜關(guān)于逆序數(shù)的問題還沒解決,現(xiàn)在有時是拼不成的,大家見諒了。
    2008-10-10

最新評論