Empire of Sports Europe
▓░░▓░░░▓░░▓▓▓░▓░░░▓▓▓░▓▓▓▓▓░░▓▓░░░▓▓░░▓▓▓░░░░░░
▓░▓░▓░░▓░░▓░░░▓░░░▓░░░▓░░░▓░░▓░▓░▓░▓░░▓░░░░░░░░
▓▓░░░▓░▓░░▓▓░░▓░░░▓░░░▓░░░▓░░▓░░▓░░▓░░▓▓▓░░░░░░
▓░░░░░▓▓░░▓░░░▓░░░▓░░░▓░░░▓░░▓░░░░░▓░░▓░░░░░░░░
▓░░░░░░▓░░▓▓▓░▓▓▓░▓▓▓░▓▓▓▓▓░░▓░░░░░▓░░▓▓▓░░░░░░
Hello and welcome to EOS-EU - First English Speaking Fansite of Empire of Sports!
Register to obtain full access to the website.
We hope you will enjoy the portal.

EOS-EU Team


Welcome to the first English Speaking Community FanSite of Empire of Sports :)
 
HomePortalCalendarGalleryFAQSearchMemberlistUsergroupsHOMEPORTALFORUMLog inRegister

Share | 

1pɔɹɐsɥǝɹ


 

 Moving image in stars style background

View previous topic View next topic Go down 
AuthorMessage
Jo_Oker
Administrator
Administrator
avatar


PostSubject: 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
Back to top Go down
View user profile
 

Moving image in stars style background

View previous topic View next topic Back to top 
Page 1 of 1

 Similar topics

-
» Winx City Style (season 6)
» Doggie Style
» BACKGROUND CHECKS FOR NOOBS
» Image Rotator
» =TFC= Banner

Permissions in this forum:You cannot reply to topics in this forum
Empire of Sports Europe :: Java Script-