이 기사는 하늘에서 화려한 눈송이를 흩어지는 효과를 달성하기위한 JavaScript 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
아래 그림과 같이 먼저 실행 효과를 살펴 보겠습니다.
전체 소스 코드는 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> JavaScript 다채로운 눈송이는 하늘에서 떨어집니다 </title>
<스타일 유형 = "텍스트/CSS">
.jb51snow {display : 블록; 오버플로 : 숨겨진; 글꼴 크기 : 12px; 위치 : 절대};
바디 {배경 :#000; 마진 : 0px}
html {오버플로 : 숨겨진; 배경 :#000;}
a {색상 : 흰색; 텍스트 결정 : 없음}
.jb51title {색상 : 빨간색; 높이 : 140px; 너비 : 800px; 마진 : 0px 자동; 텍스트-정렬 : 센터}
</스타일>
</head>
<body>
<script type = "text/javaScript">
var yanhua = "yanhua.vevb.com";
var fire = function (r, color) {
this.radius = r || 12;
this.color = 색상 || "FF6600";
this.xpos = 0;
this.ypos = 0;
this.zpos = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
this.mass = 1;
this.p = document.createElement ( "span");
this.p.classname = "jb"+"51snow";
this.p.innerhtml = "*";
this.p.style.fontsize = this.radius + "px";
this.p.style.color = "#" + this.color;
}
fire.prototype = {
부록 : 기능 (부모) {
부모. AppendChild (this.p);
},
setSize : 함수 (스케일) {
this.p.style.fontsize = this.radius * scale + "px";
},
setPosition : function (x, y) {
this.p.style.left = x + "px";
this.p.style.top = y + "px";
},
setvisible : function (b) {
this.p.style.display = b? "블록": "없음";
}
}
var fireworks = function () {
var fires = new Array ();
var count = 100;
var fl = 250;
var vpx = 500;
var vpy = 300;
var gravity = .3;
var floor = 200;
var bounce = -.8;
var 타이머;
반품 {
init : function () {
for (var i = 0; i <count; i ++) {
var color = 0xff0000;
color = (math.random () * 0xffffff) .toString (16) .toString (). split ( ".") [0];
while (color.length <6) {
색상 = "0" + 색상;
}
var fire = New Fire (12, 컬러);
Fires.push (화재);
fire.ypos = -100;
fire.vx = math.random () * 6-3;
fire.vy = math.random () * 6-3;
fire.vz = math.random () * 6-3;
Fire.Append (Document.Body);
}
var that = this;
타이머 = setInterval (function () {
for (var i = 0; i <count; i ++) {
that.move (화재 [i]);
}
}, 30);
},
움직임 : 기능 (화재) {
fire.vy += 중력;
fire.xpos += fire.vx;
fire.ypos += fire.vy;
fire.zpos += fire.vz;
if (fire.ypos> floor) {
fire.ypos = 바닥;
fire.vy *= 바운스;
}
if (fire.zpos> -fl) {
var scale = fl / (fl + fire.zpos);
Fire.SetSize (스케일);
Fire.SetPosition (vpx + fire.xpos * 스케일,
vpy + fire.ypos * scale);
fire.set -Visible (true);
} 또 다른 {
fire.set -Visible (false);
}
}
}
}
if (yanhua === 'yanhua.jb' + '51. ' +'net ')
불꽃 놀이 (). init ();
함수 jb51snow () {
Window.location.reload ();
} if (yanhua === 'yanhua.jb' + '51. ' +'net ')
SetInterval (JB51SNOW, 6000);
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.