이 기사의 예에서는 js를 사용하여 우주 별이 빛나는 하늘의 배경 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 우주 별이 빛나는 하늘 배경 효과, Js 특수 효과 .스타 {<br> 위치:절대;<br> 레이어 배경색:흰색;<br> 가시성:표시;<br> 상단:-50px;<br> 너비:50px;<br> 높이:50px;<br> 글꼴 크기:1px;<br> 배경색:흰색;<br> }<br> .60pt{글꼴 크기:60pt;색상:#ff66cc;}<br> </스타일><br> <SCRIPT LANGUAGE="자바스크립트"> <!--<br /> var starnum = 75; // 별 개수 <br /> var isNS = (document.layers);<br /> var _all = (isNS)? '' : '모두.';<br /> var _style = (isNS) ? '' : '.style';<br /> var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;<br /> function getstartpos(obj) { //별 이동의 시작 위치 정의<br /> obj.deltay = Math.floor(Math.random() * 12); //무작위 함수를 사용하여 결정<br /> obj.deltax = Math.floor(Math.random() * 12);<br /> obj.xdir = (Math.floor(Math.random() * 2) == 1) ? ' ' : '-';<br /> obj.ydir = (Math.floor(Math.random() * 2) == 1) ? ' ' : '-';<br /> obj.counter = 1;<br /> if (isNS) {<br /> obj.clip.width = 1;<br /> obj.clip.height = 1;<br /> obj.moveTo(xoffset pageXOffset, yoffset pageYOffset);<br /> } 그 밖의 {<br /> obj.width = 1;<br /> obj.높이 = 1 <br /> obj.pixelTop = yoffset document.body.scrollTop;<br /> obj.pixelLeft = xoffset document.body.scrollLeft;<br /> }<br /> }<br /> function movestar(starN) //별의 위치 이동<br /> {<br /> tmpx = starN.deltax*starN.counter starN.counter;<br /> tmpy = starN.deltay*starN.counter starN.counter;<br /> if (isNS) {<br /> starN.clip.width = starN.counter / 3;<br /> starN.clip.height = starN.counter / 3;<br /> scrlx = pageXOffset;<br /> scrly = pageYOffset;<br /> if ((starN.left tmpx >= w_x scrlx) || (starN.top tmpy >= w_y scrly) || (starN.left-tmpx <= scrlx) || (starN.top-tmpy <= scrly)) {<br /> getstartpos(starN);<br /> } 그 밖의 {<br /> eval('starN.moveBy(' starN.xdir tmpx ', ' starN.ydir tmpy ')');<br /> }<br /> } 그 밖의 {<br /> starN.width = starN.counter/3;<br /> starN.height = starN.counter/3;<br /> scrlx = document.body.scrollLeft;<br /> scrly = document.body.scrollTop;<br /> if ((starN.pixelLeft tmpx >= w_x scrlx)||(starN.pixelTop tmpy >= w_y scrly) || (starN.pixelLeft-tmpx <= scrlx)||(starN.pixelTop-tmpy <= scrly)) {<br /> getstartpos(starN);<br /> } 그 밖의 {<br /> eval('starN.pixelTop' starN.ydir '=tmpy');<br /> eval('starN.pixelLeft' starN.xdir '=tmpx');<br /> }<br /> }<br /> starN.counter ;<br /> }<br /> function animate() //모든 별을 움직이게 합니다<br /> {<br /> for(i=1; i <= starnum; i ) {<br /> movestar(eval('star' i));<br /> }<br /> setTimeout('animate()', 100);<br /> }<br /> <br /> function findwindowparams() { //별 이동 시작 위치 정의<br /> w_x = (isNS) ? window.innerWidth : document.body.clientWidth;<br /> w_y = (isNS) ? window.innerHeight : document.body.clientHeight;<br /> xoffset = w_x / 2;<br /> yoffset = w_y / 2;<br /> for (i = 1; i <= starnum; i ) {<br /> getstartpos(eval('star' i));<br /> }<br /> }<br /> 함수 resizeNS() {<br /> setTimeout('document.location.reload()', 400);<br /> }<br /> (isNS) ? window.onresize = resizeNS : window.onresize = findwindowparams;<br /> window.onload = new Function("findwindowparams(); animate();");<br /> --><br> <br> </HEAD><br> <바디><br> <본문 bgcolor=#999999><br> <SCRIPT LANGUAGE="자바스크립트"> <!--<br /> for (i = 1; i <= starnum; i ) { //별에 대한 레이어 정의 <br /> document.writeln('<div id="star' i '" class="star"></div>');<br> eval('var star' i '=document.' _all 'star' i _style);<br> }<br> --><br> <br> <p><center><br> <font class=60pt><br>별이 빛나는 우주의 하늘을 날아보세요<br></font><br> <p><br> </본문><br> </p> </div>
