JS實現動態雪花飄落

來源：懂視網責編：小采時間：2020-11-27 19:54:23

JS實現動態雪花飄落

JS實現動態雪花飄落:這次給大家帶來JS實現動態雪花飄落，JS實現動態雪花飄落的注意事項有哪些，下面就是實戰案例，一起來看一下。<!DOCTYPE html> <html> <head> <meta content="text/html" charset="u

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現動態雪花飄落:這次給大家帶來JS實現動態雪花飄落，JS實現動態雪花飄落的注意事項有哪些，下面就是實戰案例，一起來看一下。<!DOCTYPE html> <html> <head> <meta content="text/html" charset="u

這次給大家帶來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網其它相關文章！

JS實現動態雪花飄落

推薦度：

點擊下載本文 文檔為doc格式

標簽：動態雪花實現

熱門焦點

JS實現動態雪花飄落

JS實現動態雪花飄落

JS實現動態雪花飄落

最新推薦

猜你喜歡

熱門推薦