Jo_Oker Administrator
| Subject: Moving image in stars style background Thu Jan 24, 2013 11:10 pm | |
| - Code:
-
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin document.bgColor='black'; astropic = "http://i14.servimg.com/u/f14/16/73/75/32/images16.jpg"; var xval = new Array(); var yval = new Array(); no = 100; speed = 200; // speed xp = 20 + 100 * Math.random(); yp = 20 + 100 * Math.random(); angle = 3.14 * Math.random(); xinc = 3 * Math.sin(angle); yinc = 3; var ns = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4)); ie=!ns; if (ie) { Wwidth = document.body.clientWidth; Hheight = document.body.clientHeight; } if (ns) { Wwidth = self.innerWidth; Hheight = self.innerHeight; } for (var i = 0; i <= no; i++) { document.write("<div id=\"div" + i+ "\" style=\"color:white;"); document.write("position:absolute;left:100;\">.</div>"); } document.write("<div id=\"diva\" style=\"position:absolute;\">"); document.write("<img src=" + astropic + " border=\"0\" width=\"65\" height=\"95\"></div>"); for (i = 0; i <= no; i++) { xval[i] = Wwidth * Math.random(); yval[i] = Hheight * Math.random(); document.getElementById("div" + i).style.left = xval[i]; document.getElementById("div" + i).style.top = yval[i]; } function star() { for (i = 0; i <= no; i = i+4) { xval[i] +=5; if ((i%20) == 0) xval[i] += 10; if(xval[i] >= Wwidth) xval[i] = Wwidth * Math.random(); document.getElementById("div" + i).style.left = xval[i]; } return true; } function goangle() { angle = 3.14 * Math.random(); xinc = 3 * Math.sin(angle); return true; } function space() { document.getElementById("diva").style.left = xp; document.getElementById("diva").style.top = yp;
xp += xinc; yp +=yinc; star(); if ((xp >= (Wwidth - 50)) || (xp <= 10)) { goangle(); xinc = (-1) * xinc; } if ((yp >= (Hheight - 50)) || (yp <= 10)) { goangle(); yinc = (-1) * yinc; } setTimeout('space()', speed); } window.onload=space; // End --> </script> Random movements over the background of moving stars. Step 1: Add the below code to the body section of your page. Step 2: Add your own image. Tested at:Google,Firefox,IE |
|