<!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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js+canvas绘制饼状统计图
react-native-fs插件使用案列详解
以上就是js实现动态雪花飘落的详细内容。