Dette script giver dig fyrværkeri på din hjemmeside. Ganske enkelt. Så nu er du sikker på at få et godt nytår - på din hjemmeside :-)
Selve javascriptet har jeg samlet i en fil, med navnet firework.js. Fyrværkeriet kan dernæst meget enkelt tilføjes de ønskede sider, hvor animationen skal vises, ved blot at skrive en enkelt kode, der henter javascriptet firework.js
Dette javascript virker i følgende browsere: Mozilla Firefox 1, Netscape 7 og Internet Explorer 6, og er XHTML 1.0-validateret af W3C
Start med at gemme billederne med raketter på dit websted:
Opret en fil med navnet firework.js og gem den på dit websted. Filen skal indeholde følgende kode, og IKKE andet... HUSK: At ændre stien hvor billederne med raketter er placeret... EKSTRA: Du kan ændre antallet af Raketter i et fyrværkeri... EKSTRA: Du kan også justere Pausen mellem fyrværkerierne i sekunder... EKSTRA: Hvis true: Raketterne har den samme farve i et fyrværkeri, ellers false: Raketterne har forskellige farver
Download evt. filen firework.js her:
////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////
var FIRE_Path = "http://www.domain.com/firework/"; // Sti til mappen med fyrværkeri-billeder
var FIRE_no = 10; // Antal Rakketter ad gangen
var FIRE_Pause = 5; // Pause mellem hver fyrværkeri i sekunder
var FIRE_SameColor = false; // true = Rakketterne har samme farve pr. gang.
var FIRE_Time, FIRE_Bang, FIRE_Vindue_Width, FIRE_Vindue_Height;
var FIRE_PosLeft, FIRE_PosTop, FIRE_PosVenAfv, FIRE_PosTopAfv;
var i;
var FIRE_j = 0;
var FIRE_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var FYR_browser_IE_SCM = (document.documentElement.clientHeight) ? 1 : 0;
var FIRE_browser_MOZ = (self.innerWidth) ? 1 : 0;
if (FIRE_browser_IE_NS)
{
FIRE_Vindue_Width = document.body.clientWidth;
FIRE_Vindue_Height = document.body.clientHeight;
}
else if (FYR_browser_IE_SCM)
{
FIRE_Vindue_Width = document.documentElement.clientWidth;
FIRE_Vindue_Height = document.documentElement.clientHeight;
}
else
{
FIRE_Vindue_Width = self.innerWidth - 20;
FIRE_Vindue_Height = self.innerHeight;
}
var FIRE_Top = 10;
var FIRE_Bot = FIRE_Vindue_Height - 40;
var FIRE_Mid = FIRE_Vindue_Width/2;
FIRE_PosLeft = new Array();
FIRE_PosTop = new Array();
FIRE_PosVenAfv = new Array();
FIRE_PosTopAfv = new Array();
FIRE_Time = new Array();
FIRE_TopBang = new Array();
FIRE_Billede = new Array();
FIRE_Farve = new Array("orange","blue","yellow","red","green");
FIRE_Pause = FIRE_Pause*1000;
for (i = 0; i < FIRE_no; ++ i)
{
FIRE_TopBang[i] = FIRE_Top + Math.random()*200;
FIRE_PosTop[i] = FIRE_Bot;
FIRE_PosTopAfv[i] = 0;
FIRE_PosLeft[i] = FIRE_Mid;
if (i % 2 == 0) FIRE_PosVenAfv[i] = 4*Math.random();
else FIRE_PosVenAfv[i] = Math.random()*(-4);
document.write("<\div id=\"FIRE_no"+ i +"\" style=\"position: absolute; font-size: 15px; z-index: "+ i +"; visibility: visible; top: "+FIRE_PosTop[i]+"px; left: "+FIRE_PosLeft[i]+"px;\"><a href=\"http://www.peters1.dk\" target=\"_blank\"><b>.</b></a><\/div>");
}
function FIRE_Op(FIRE_number)
{
if (FIRE_PosTop[FIRE_number] > (FIRE_Top + FIRE_TopBang[FIRE_number]))
{
FIRE_PosTop[FIRE_number] = FIRE_PosTop[FIRE_number] - FIRE_PosTopAfv[FIRE_number];
FIRE_PosLeft[FIRE_number] = FIRE_PosLeft[FIRE_number] + FIRE_PosVenAfv[FIRE_number];
FIRE_PosTopAfv[FIRE_number] = (FIRE_PosTop[FIRE_number]/40);
document.getElementById("FIRE_no"+FIRE_number).style.top=FIRE_PosTop[FIRE_number]+"px";
document.getElementById("FIRE_no"+FIRE_number).style.left=FIRE_PosLeft[FIRE_number]+"px";
FIRE_Time[i] = setTimeout("FIRE_Op("+FIRE_number+")",10);
}
else
{
clearTimeout("FIRE_Time["+FIRE_number+"]");
FIRE_ShowBang(FIRE_number);
}
}
function FIRE_Start()
{
if (FIRE_SameColor)
{
if (FIRE_j == 4) FIRE_j = 0;
else FIRE_j = FIRE_j + 1;
}
for (i = 0; i < FIRE_no; i++)
{
if (!FIRE_SameColor)
{
FIRE_j = Math.round(Math.random() * 4);
}
FIRE_Billede[i] = FIRE_Path+FIRE_Farve[FIRE_j]+".gif";
document.getElementById("FIRE_no"+i).innerHTML = "<b>*</b>";
document.getElementById("FIRE_no"+i).style.color=FIRE_Farve[FIRE_j];
setTimeout("FIRE_Op("+i+")",(1500*Math.random()));
}
}
function FIRE_ShowBang(FIRE_number)
{
if (FIRE_number == 0) document.getElementById("FIRE_no"+FIRE_number).innerHTML = "<a href=\"http://www.peters1.dk\" target=\"_blank\"><\img src=\""+FIRE_Billede[FIRE_number]+"\" border=\"0\" /></a>";
else document.getElementById("FIRE_no"+FIRE_number).innerHTML = "<\img src=\""+FIRE_Billede[FIRE_number]+"\" border=\"0\" />";
document.getElementById("FIRE_no"+FIRE_number).style.top=(FIRE_PosTop[FIRE_number] - 20)+"px";
document.getElementById("FIRE_no"+FIRE_number).style.left=(FIRE_PosLeft[FIRE_number] - 40)+"px";
setTimeout("FIRE_Reset("+FIRE_number+")",1000)
}
function FIRE_Reset(FIRE_number)
{
FIRE_TopBang[FIRE_number] = FIRE_Top + Math.random()*100;
FIRE_PosTop[FIRE_number] = FIRE_Bot;
FIRE_PosTopAfv[FIRE_number] = 4;
FIRE_PosLeft[FIRE_number] = FIRE_Mid;
if (FIRE_number % 2 == 0) FIRE_PosVenAfv[FIRE_number] = 4*Math.random();
else FIRE_PosVenAfv[FIRE_number] = Math.random()*(-4);
document.getElementById("FIRE_no"+FIRE_number).innerHTML = "";
document.getElementById("FIRE_no"+FIRE_number).style.top=FIRE_PosTop[FIRE_number]+"px";
document.getElementById("FIRE_no"+FIRE_number).style.left=FIRE_PosLeft[FIRE_number]+"px";
if (FIRE_number == FIRE_no-1) setTimeout("FIRE_Start()",FIRE_Pause);
}
FIRE_Start();
Denne html kode skal indsættes lige efter <body> på de websider, hvor fyrværkeriet skal vises: HUSK: At ændre adressen til der hvor du har placeret filen firework.js