js 烟花效果 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>烟花效果</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#000;overflow:hidden;}
</style>
</head>

<body>
<script type="text/javascript">
window.onload = function(){
    var winWidth = document.documentElement.clientWidth || document.body.clientWidth;
    var winHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var disX = 0;
    var disY = 0;
    var scroll = null;
    document.onclick = function(e){
        var oEvent = e || window.event;
        scroll = document.documentElement.scrollTop || document.body.scrollTop;
        disX = oEvent.clientX;
        disY = oEvent.clientY;
        var moveDiv = document.createElement("div");
        moveDiv.style.position = "absolute";
        moveDiv.style.left = disX + "px";
        moveDiv.style.top = winHeight + scroll + "px";
        moveDiv.style.width = "5px";
        moveDiv.style.height = "20px";
        moveDiv.style.background = "red";
        document.body.appendChild(moveDiv);
        moveDiv.timer = setInterval(function(){
            if(moveDiv.offsetTop<=disY){
                clearInterval(moveDiv.timer);
                document.body.removeChild(moveDiv);
                bone();
            }else{
                moveDiv.style.top = moveDiv.offsetTop - 20 + "px";    
            }
        },40)
    }    
    function bone(){
        var arr = [];
        var timer = null;
        var i;
        var len = 0;
        for(i=0;i<30;i++){
            var boneDiv = document.createElement("div");
            boneDiv.style.position = "absolute";
            boneDiv.style.left = disX + "px";
            boneDiv.style.top = disY + scroll + "px";
            boneDiv.style.width = "5px";
            boneDiv.style.height = "5px";
            boneDiv.style.background = "#"+getBg();
            document.body.appendChild(boneDiv);
            arr.push(boneDiv);
            boneDiv.iSpeedX = Math.ceil(Math.random()*20-10);
            boneDiv.iSpeedY = Math.ceil(Math.random()*20-10);
        }
        len = arr.length;
        timer = setInterval(function(){
            for(i=0,len=arr.length;i<len;i++){
                if(! arr[i]){continue}
                arr[i].style.left = arr[i].offsetLeft + arr[i].iSpeedX + "px";
                arr[i].style.top = arr[i].offsetTop + arr[i].iSpeedY + "px";
                arr[i].iSpeedY++;
                if(arr[i].offsetLeft<=0 || arr[i].offsetLeft>=winWidth || arr[i].offsetTop <=0 || arr[i].offsetTop >= winHeight){
                    document.body.removeChild(arr[i])    
                    arr[i] = null;
                    len--;
                }
                if(len<=0){
                    clearInterval(timer);
                }
            }

        },40)
    }
    function getBg(){
        var color = Math.ceil(Math.random()*16777215).toString(16);
        while(color<6){
            color = "#"+color;
        }
        return color;
    }
}
</script>
</body>
</html>

 

posted @ 2013-10-10 11:58  修次Edward  阅读(344)  评论(0)    收藏  举报