JS實現動態雪花飄落

這次帶給大家JS動態雪花飄落，JS實現動態雪花飄落的注意事項有哪些，以下就是實戰案例，一起來看一下。

nbsp;html>


    <meta>
    <title>飘雪</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-family:"微软雅黑";
            font-size:13px;
            color:#ffffff;
        }
        body{
            background:#00a0fc;
            overflow:hidden;
        }
    </style>



<script></script>
<script>
//    窗口大小
    var oPageX=window.screen.width;
    var oPageY=window.screen.height;
    var aSnow=[];
//    雪花模板
    function snow(x,y,xspeed,yspeed,xsin,size){//x水平位置,y垂直位置,xspeed水平步距,yspeed垂直步距,xsin振幅,size雪花大小
        this.node=document.createElement(&#39;p&#39;);
        this.x=x;
        this.y=y;
        this.xspeed=xspeed;
        this.yspeed=yspeed;
        this.xsin=xsin;
        this.size=size;
        this.createSnow=function(){
            this.node.style.position=&#39;absolute&#39;;
            this.node.style.top=this.y+&#39;px&#39;;
            this.node.style.left=this.x+&#39;px&#39;;
            this.node.innerHTML=&#39;*&#39;;
            document.body.appendChild(this.node);
        };
        this.createSnow();
        this.snowMove=function(){
            this.node.style.top=parseInt(this.node.style.top)+this.yspeed+&#39;px&#39;;//垂直方向运动
            this.node.style.left=parseInt(this.node.style.left)+this.xsin*Math.sin(this.xspeed)+&#39;px&#39;;
            this.node.style.fontSize=this.size+&#39;px&#39;;
//            this.node.style.color=&#39;rgb(&#39;+Math.ceil(Math.random()*255)+&#39;,&#39;+Math.ceil(Math.random()*255)+&#39;,&#39;+Math.ceil(Math.random()*255)+&#39;)&#39;;
        };
    }
//    创建雪花
    function createSnow(){
        aSnow.push(new snow(Math.random()*oPageX,-50,0.02+Math.random()/10,1+Math.random(),Math.random()*30,20+Math.random()*30));
    }
    setInterval(createSnow,1000);//一秒钟创建一个雪花
//    雪花移动函数
    function snowMove(){
        for(var j=0;j<aSnow.length;j++){
            aSnow[j].snowMove();
            if(parseInt(aSnow[j].node.style.top)>oPageY || parseInt(aSnow[j].node.style.left)>oPageX){
                aSnow[j].node.parentNode.removeChild(aSnow[j].node);
                aSnow.splice(j,1);
            }
        }
    }
    setInterval(snowMove,10);
</script>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS canvas繪製餅狀統計圖

#react-native-fs外掛程式使用案例詳解

以上是JS實現動態雪花飄落的詳細內容。更多資訊請關注PHP中文網其他相關文章！