jquery實現(xiàn)煙花效果(面向?qū)ο?

本文實例為大家分享了jquery實現(xiàn)煙花效果的具體代碼，供大家參考，具體內(nèi)容如下

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、郯城網(wǎng)站維護、網(wǎng)站推廣。

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>煙花效果(面向?qū)ο?</title>
 <style type="text/css">
  *{padding: 0;margin: 0}
  body{overflow: hidden;width: 100%;height: 100%;background: #000; }
  div{position: absolute;background: #000;color: #fff}
 </style>
 <script src="jquery-1.8.3.min.js"></script></script>


</head>

<body>
<script type="text/javascript">
 var firWorks = {
  init : function(){ //初始化
   var _that = this;
    $(document).bind("click",function(e){
    _that.eventLeft = e.pageX;
    _that.eventTop = e.pageY;
    _that.createCylinder();
    });
  },
  createCylinder : function(event){ //創(chuàng)建一個花筒
   var _that = this;
   this.cHeight = document.documentElement.clientHeight;//瀏覽器高度
   this.cylinder = $("<div/>");
   $("body").append(this.cylinder);
   this.cylinder.css({"width":4,"height":15,"background-color":"red","top":this.cHeight,"left":this.eventLeft});
   this.cylinder.animate({top:this.eventTop},600,function(){
    $(this).remove();
    _that.createFlower();
   })
  },
  createFlower : function(){ //創(chuàng)建很多很多的煙花哇！！
   /*煙花效果
   *1.煙花是很多個DIV構(gòu)成
   *2.每個煙花的顏色不一樣
   *3.煙花的位置也不一樣
   *4.煙花散開方向不一樣
   *5.煙花有下墜感覺
   */
   //通過循環(huán)可以創(chuàng)建你想要的煙花啦！！！
   var _that = this;
   for(var i = 0 ; i < 30; i++ ){
    $("body").append($("<div class='flower'></div>"));
   };
   $(".flower").css({"width":3,"height":3,"top":this.eventTop,"left":this.eventLeft});
   $(".flower").each(function(index, element) {
    var $this = $(this);
    var yhX = Math.random()*400-200;
    var yhY = Math.random()*600-300;
    _that.changeColor();
    $this.css({"background-color":"#"+_that.randomColor,"width":3,"height":3}).animate({"top":_that.eventTop-yhY,"left":_that.eventLeft-yhX},500);//散開
    for(var i=0;i<30;i++){
     //判斷鼠標點擊時的右邊煙花還是左邊煙花
     if(yhX<0){
      _that.downPw($this,"+");//右下墜
     }else{
      _that.downPw($this,"-");//左下墜
     }
    }
   });     
  },
  changeColor : function(){
   /*煙花的顏色是隨機的，而且是用16進制表示色值，所以用隨機數(shù)結(jié)合16進制;
   *16進制的最大值ffffff,轉(zhuǎn)換成十進制16777215;
   *Math.random()*16777215公式可以得到0-16777215之間的數(shù)，因為是小數(shù)，所以要用到取整;
   *Math.ceil(Math.random()*16777215)生成一個在顏色值范圍內(nèi)的，隨機的十進制值;
   *Math.random()*9+1公式可以得到1-10之間的數(shù)，以此類推
   *.toString(16)方法，是把得到的十進制，轉(zhuǎn)換成16進制，也就是隨機的顏色值了;
   */    
   this.randomColor = "";
   this.randomColor = Math.ceil(Math.random()*16777215).toString(16)//;
   //當(dāng)這個產(chǎn)生的隨機的顏色值，不足6位數(shù)的進候，需要補齊，又不改變其值，所以要在這個數(shù)的前面加零;
   while(this.randomColor.length<6){
    this.randomColor = "0"+this.randomColor;
   }
  },
  downPw : function(ele,type){ //煙花下墜啦 ！！！！
   ele.animate({"top":"+=30","left":type+"=4"},50,function(){
     setTimeout(function(){ele.remove()},2000);
   })
  }
 };
 firWorks.init();
</script>

</body>
</html>

更多JavaScript精彩特效分享給大家：

jQuery幻燈片特效匯總

jQuery焦點圖特效匯總

jQuery級聯(lián)菜單特效匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：jquery實現(xiàn)煙花效果(面向?qū)ο?
鏈接地址：http://www.chinadenli.net/article44/gepohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計、標簽優(yōu)化、用戶體驗、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

jquery實現(xiàn)煙花效果(面向?qū)ο?