本文实例讲述了js实现宇宙星空背景效果的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: 宇宙星空背景效果,Js特效 <br /> .star {<br /> position:absolute;<br /> layer-background-color:white;<br /> visibility:visible;<br /> top:-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-tmpy <= 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程序设计有所帮助。