本文實例講述了js實現宇宙星空背景效果的方法。分享給大家供大家參考。具體實作方法如下: 複製程式碼 程式碼如下: 宇宙星空背景效果,Js特效 <br /> .star {<br /> position:absolute;<br /> layer-background-color:white;<br /> visibility:visible;<br /> 頂:-50px;<br /> width:50px;<br /> height:50px;<br /> font-size:1px;<br /> background-color:white;<br /> }<br /> .60pt{font-size:60pt;color:#ff66cc;}<br /> <br /> <!--<br /> var starnum = 75; // 星星的數目<br /> var isNS = (document.layers);<br /> var _all = (isNS)? '' : 'all.';<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 /> } else {<br /> obj.width = 1;<br /> obj.height = 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 /> } else {<br /> eval('starN.moveBy(' starN.xdir tmpx ', ' starN.ydir tmpy ')');<br /> }<br /> } else {<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-pyp <Left-tmpx <= scrlx)||(starN.pixelTop-pypy <Left-scrly) < <br /> getstartpos(starN);<br /> } else {<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 /> function 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 /> <!--<br /> for (i = 1; i <= starnum; i ) { //給星星定義層<br /> document.writeln('<div id="star' i '" class="star"> '); eval('var star' i '=document.' _all 'star' i _style); } --> 飛在宇宙的星空中 運作效果如下圖: 希望本文所述對大家的javascript程式設計有所幫助。