ホームページ >ウェブフロントエンド >jsチュートリアル >JSでダイナミックな雪の結晶の降下を実現
JSでダイナミックな雪の結晶の降下を実現
- php中世界最好的语言オリジナル
- 2018-04-18 09:12:472752ブラウズ
今回は、ダイナミックな雪の結晶の降下を実現するための 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>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がJSでダイナミックな雪の結晶の降下を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JS+canvasで円グラフを描画します次の記事：JS+canvasで円グラフを描画します