JS实现动态雪花飘落

来源：咤帕游戏

这次给大家带来JS实现动态雪花飘落，JS实现动态雪花飘落的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html>
<head>
 <meta content="text/html" charset="utf-8">
 <title>飘雪</title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 font-family:"微软雅黑";
 font-size:13px;
 color:#ffffff;
 }
 body{
 background:#00a0fc;
 overflow:hidden;
 }
 </style>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 窗口大小
 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('p');
 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='absolute';
 this.node.style.top=this.y+'px';
 this.node.style.left=this.x+'px';
 this.node.innerHTML='*';
 document.body.appendChild(this.node);
 };
 this.createSnow();
 this.snowMove=function(){
 this.node.style.top=parseInt(this.node.style.top)+this.yspeed+'px';//垂直方向运动
 this.node.style.left=parseInt(this.node.style.left)+this.xsin*Math.sin(this.xspeed)+'px';
 this.node.style.fontSize=this.size+'px';
// this.node.style.color='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')';
 };
 }
// 创建雪花
 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>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！