이번에는 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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
react-native-fs 플러그인 사용 사례 세부 정보
위 내용은 JS는 역동적인 눈송이가 떨어지는 것을 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!