DIV CSS 佈局教程網

js 網頁煙花效果
編輯:JavaScript基礎知識     

今天制作了一個網頁煙花效果。

下面是制作思路和基本代碼。

手動釋放煙花:

1)煙花從底部往上飛入
2)煙火飛到目標位置後產生爆炸效果
3)爆炸效果產生多個炮灰
4)炮灰往四周擴散
5)炮灰飛出屏幕後消失

自動煙花:

  設置定時器讓其定時釋放。

查看效果
 <html>
 <head>
     <titlt><網頁煙花效果/title>
     <meta charset = "utf-8" />
 </head>
 <body>
     <div id="tips">
          <a id="auto" href="javascript:;" class="">自動放煙花</a>   
     </div>
 </body>
 </html>        
<style type="text/css">
    html,body{overflow:hidden;height:100%;}
    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;}
    .fire {
        width: 3px;
        height: 30px;
        background: white;
        position: absolute;top:100%;
    } 
    .spark {
        position: absolute;
        width: 3px;
        height: 3px;
    }
</style>
<script src="../common.js"></script>
<script>
    window.onload = function(){
        
        var win = document.documentElement;
        document.onclick = function(e){
            e = e || window.event;

            fire({x:e.clientX,y:e.clientY});
        }

        // 自動放煙花
        var timer;
        $('#auto').onclick = function(e){
            e = e || window.event;

            // 阻止冒泡
            e.stopPropagation();

            this.autoFire = !this.autoFire;

            if(!this.autoFire) {
                clearInterval(timer);
                this.innerHTML = this.innerHTML.replace('(激活)','');
                return;
            }
            this.innerHTML += '(激活)';
            timer = setInterval(function(){
                var x = getRandomNum(10,win.offsetWidth-10);
                var y = getRandomNum(100,win.offsetHeight-100);
                fire({x:x,y:y});
            },2000);

            
        }

        // 煙花飛入函數
        function fire(coord){
            // 生成煙花
            var fireworks = document.createElement('div');
            fireworks.className = 'fire';
            fireworks.style.left = coord.x + 'px';
            document.body.appendChild(fireworks);

            // 煙花飛入點擊位置,並改變煙花高度
            animate(fireworks,{top:coord.y,height:3},function(){
                //煙花飛入動畫結束後
                // 清除煙花元素
                document.body.removeChild(fireworks);

                // 爆炸效果
                bomb({x:coord.x,y:coord.y});
            });
        }
        
        // 爆炸效果函數
        function bomb(coord){
            var num = 50;
            for(var i=0;i<num;i++){
                var _s = new Spark(coord)
                _s.init();
            }
        }


        function Spark(coord){
            // 初始化火花
            this.init = function(){
                var _spark = document.createElement('div');
                _spark.className = 'spark';
                _spark.style.backgroundColor = getRandomColor();
                _spark.style.top = coord.y + 'px';
                _spark.style.left = coord.x + 'px';
                document.body.appendChild(_spark);

                // 保存火花到this
                this.spark = _spark;

                var xSpeed = getRandomNum(-20,20);
                var ySpeed = getRandomNum(-20,20);

                this.move(xSpeed,ySpeed);
            }
        }

        // 火花運動
        Spark.prototype.move = function(xSpeed,ySpeed){
            var self = this;
            var _spark = this.spark;
            this.timer = setInterval(function(){
                _spark.style.top = _spark.offsetTop + ySpeed++ + 'px';
                _spark.style.left = _spark.offsetLeft + xSpeed + 'px';

                // 火花超出屏幕後,清除定時器,並清對應除頁面元素
                if(_spark.offsetTop<0 || _spark.offsetTop > win.offsetHeight || _spark.offsetLeft < 0 || _spark.offsetLeft > win.offsetWidth){
                    clearInterval(self.timer);
                    document.body.removeChild(_spark);
                }
            },20);
        }
    }
</script>

上面的js代碼中我導入了自己封裝外部js文件

一個是獲取隨機顏色,一個是獲取隨機數,另外還有一個是選擇器。

你們測試的時候可以復制進去都只有幾句下面是其代碼:


function $(selector){
if(document.querySelectorAll){
var list = document.querySelectorAll(selector);
// 如果得到的列表只有一個,則直接返回element元素節點
return list.length==1 ? list[0] : list;
}else{
// 判斷selector是否為id
if(/^#document.querySelector\w+/.test(selector)){
return document.getElementById(selector.substring(1));
}


// selector是否為類選擇器
else if(/^\.\w+/.test(selector)){
return document.getElementsByClassName(selector.substring(1));
}else{
return document.getElementsByTagName(selector);
}
}
}

function getRandomNum(min,max){
    return parseInt(Math.random()*(max-min + 1)) + min;
}

/*
    獲取隨機顏色
 */
function getRandomColor(){
    return 'rgb('+ getRandomNum(0,255) + ','+ getRandomNum(0,255) + ','+ getRandomNum(0,255) + ')';
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved