JS实现动态雪花飘落
程序员文章站
2022-04-23 11:23:06
...
这次给大家带来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>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是JS实现动态雪花飘落的详细内容,更多请关注其它相关文章!
上一篇: 怎样对vue项目api接口进行管理
下一篇: php实现强类型函数返回值