이 기사에서는 매우 멋진 웹 불꽃 놀이 애니메이션 효과를 달성하기위한 JS 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
JS를 사용하여 구현 된 웹 불꽃 놀이를 설정하는 애니메이션 효과는 매우 눈부신 일이며 JS에 적응하여 이러한 애니메이션을 만들 수 있습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 슈퍼 쿨 웹 불꽃 놀이 효과 </title>
</head>
<스타일 유형 = "텍스트/CSS">
.Fire {디스플레이 : 블록; 오버플로 : 숨겨진; 글꼴 크기 : 12px; 위치 : 절대};
신체 {오버플로 : 숨겨진; 배경 :#000}
html {오버플로 : 숨겨진; 배경 :#000}
</스타일>
<body>
</body>
<script type = "text/javaScript">
var fire = function (r, color) {
this.radius = r || 12;
this.color = 색상;
this.xpos = 0;
this.ypos = 0;
this.zpos = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
this.mass = 1;
this.x = 0;
this.y = 0;
this.p = document.createElement ( "span");
this.p.classname = "Fire";
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 = 150;
var fl = 250;
var vpx = 500;
var vpy = 300;
var gravity = .5;
var floor = 200;
var bounce = -.8;
var 타이머;
var wind = ((math.floor (math.random ()*3) + 3)/10)*(Math.random ()*2-1> 0? 1 : -1)*. 25;
var wpos = 0;
var wcount;
반품 {
init : function () {
wcount = 50 + math.floor (math.random () * 100);
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.vz = math.random () * 6-3;
fire.vx = (math.random ()*2-1)*2;
fire.vy = math.random ()* - 15-15;
fire.x = 500
fire.y = 600;
Fire.Append (Document.Body);
}
var that = this;
타이머 = setInterval (function () {
WPO ++;
if (wpos> = wcount) {
wpos = 0;
wcount = 50 + math.floor (math.random () * 100);
바람 = ((Math.floor (Math.random ()*3) + 3)/10)*(Math.random ()*2-1> 0? 1 : -1)*. 25;
}
for (var i = 0; i <count; i ++) {
that.move (화재 [i]);
}
}, 30);
},
움직임 : 기능 (화재) {
fire.vy += 중력;
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += 바람;
Fire.SetPosition (fire.x, fire.y);
if (fire.x <0 || fire.x> 1000 || fire.y <0 || fire.y> 600) {
fire.vx = (math.random ()*2-1)*2;
fire.vy = math.random ()* - 15-15;
fire.x = 500;
fire.y = 600;
Fire.SetPosition (fire.x, fire.y);
}
}
}
}
불꽃 놀이 (). init ();
</스크립트>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.