english Анимированный фейерверк на javascript

Эту страницу перевел Андрей 

Этот анимационный javascript позволяет устроить фейерверк у себя на web страничке. Теперь можно быть уверенным, что Новый Год будет счастливым, по крайней мере для сайта :-)

Этот javascript - один файл, с именем firework.js. Фейерверк может быть включен в вашу страницу, путем вставки простой строки кода, которая подключит файл firework.js

Скрипт работает в следующих браузерах:


 
 

Для начала сохраните картинки на своем веб-сервере:

Создайте новый файл с именем firework.js и сохраните к себя на сайте. Файл должен иметь следующее содержимое...
НЕ ЗАБУДЬТЕ: Поменять путь к картинкам фейерверка
ДОПОЛНИТЕЛЬНО: Вы можете поменять количество ракет в залпе...
ДОПОЛНИТЕЛЬНО: Вы можете скорректировать время между залпами в секундах
ДОПОЛНИТЕЛЬНО: Если установить true все рокеты будут одного цвета, а если false то разных цветов

Скачать firework.js можно тут: firework.js

////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////

var FIRE_Path = "http://www.domain.com/firework/"; // Путь в папке с картинками
var FIRE_no = 10; // Количество рокет в залпе
var FIRE_Pause = 5; // Пауза между залпами в секундах
var FIRE_SameColor = false; // true = Ракеты должны быть одного цвета (true/false)

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();

Включите следующий html код сразу за тегом <body> вашей страницы, если отите увидеть фейерверк:
НЕ ЗАБУДЬТЕ: Измените путь до файла firework.js

<script type="text/javascript" src="http://www.domain.com/firework/firework.js"></script>

 

Вы смогли настроить этот скрипт? Пожалуйста, пожертвуйте немного денег...



...на написание новых скриптов :-)
Fyrværkeri på hjemmesiden med Javascript

Javascript Animated Firework on webpage

Animoitu Javascript Ilotulitus verkkosivulla

vuurwerk op je website

Un feu d'artifice animé en JavaScript sur votre page web

Animowane sztuczne ognie w Javascript na strone

Анимированный фейерверк на javascript

Denne side på dansk Fyrværkeri på hjemmesiden med Javascript
This page in english Javascript Animated Firework on webpage
Sivu suomi Animoitu Javascript Ilotulitus verkkosivulla
Deze pagina in het Nederlands vuurwerk op je website
Cette page en français Un feu d'artifice animé en JavaScript sur votre page web
Strona w języku polskim Animowane sztuczne ognie w Javascript na strone
 
Титульный лист Читать/ знак принадлежащий мне гость книга Sitemap Send mail   Bookmark and Share

Как минимум 8 записей в моей гостевухе начиная с:
Deutschland (Germany) United States UK France Österreich (Austria) 
Valid XHTML 1.0!