이 기사의 예에서는 JavaScript를 사용하여 웹 페이지에서 배경 불꽃놀이 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
여기 웹페이지 배경의 불꽃놀이 특수 효과는 말할 필요도 없이 JS로 구현되었습니다. 검은 배경, 화려한 불꽃놀이 효과, 흩어진 불꽃놀이 효과와 가장 잘 어울립니다. 이전 웹페이지에서도 이와 유사하지만 코드가 더 깔끔합니다.
작동 효과는 아래와 같습니다.
구체적인 코드는 다음과 같습니다.
<html> <head> <title>背景的烟花效果</title> <style type="text/css"> <!-- body { background-color: #000000; } --> </style></head> <body> <script language="JavaScript"> var col = new Array('#ffffff','#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000'); var p='<div id="rearDiv" style="position:absolute;top:0px;left:0px">'; var n=0; for (i=0;i<14;++i){ n++; if (n=(col.length-1)) n=0; p=p+'<div style="position:relative;width:1px;height:1px;background:'+col[n]+';font-size:3px">.</div>'; } p=p+"</div>"; document.write(p); var Clrs = new Array('ff0000','00ff00','000aff','ff00ff','ffa500','ffff00','00ff00','ffffff','fffff0'); var sClrs = new Array('ffa500','55ff66','AC9DFC','fff000','fffff0'); var peepY; var peepX; var step = 5; var tallyStep = 0; var backColor = 'ffa000'; var Mtop = 250; var Mleft = 250; function dissilient() { peepY = window.document.body.clientHeight/3; peepX = window.document.body.clientWidth/8; enlarge(); tallyStep+= step; reduce(); T=setTimeout("dissilient()",20); } function enlarge(){ for ( i = 0 ; i < rearDiv.all.length ; i++ ) { var c=Math.round(Math.random()*(Clrs.length-1)); if (tallyStep < 90) rearDiv.all[i].style.background=backColor; if (tallyStep > 90) rearDiv.all[i].style.background=Clrs[c]; rearDiv.all[i].style.top = Mtop + peepY*Math.sin((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100); rearDiv.all[i].style.left = Mleft + peepY*Math.cos((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100); } } function reduce(){ if (tallyStep == 220) { tallyStep = -10; var k=Math.round(Math.random()*(sClrs.length-1)); backColor = sClrs[k]; Dtop = window.document.body.clientHeight - 250; Dleft = peepX * 3.5; Mtop = Math.round(Math.random()*Dtop); Mleft = Math.round(Math.random()*Dleft); document.all.rearDiv.style.top = Mtop+document.body.scrollTop; document.all.rearDiv.style.left = Mleft+document.body.scrollLeft; if ((Mtop < 20) || (Mleft < 20)) { Mtop += 90; Mleft += 90; } } } dissilient(); </script> </body> </html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.