Главная » Файлы » Прочие скрипты » Яваскрипты

Эффект фейерверка на вашем сайте
23.06.14, 08:18:50



Для начала посмотрите ДЕМО

Далее переходим к установке:

После /head вставляйте:
Код
<SCRIPT LANGUAGE="JavaScript1.2">  
  <!--  

  /*  
  Document firework script (By Matt Gabbert, mgabbert@usrtoday.com, http://www.nolag.com)  
  Permission granted to Dynamic Drive to feature script in archive  
  For full source and 100's more DHTML scripts, visit http://dynamicdrive.com  
  */  

  //set Interval between each firework display,
  var intervals=2000  
  var sparksOn = true;  
  var speed = 40;  
  var power = 3;  

  //Dont change these values-------  
  var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0  
  var ns=(document.layers);  
  var ie=(document.all);  
  var ns6=(document.getElementById&&!document.all);  
  var sparksAflyin = false;  
  var allDivs = new Array(10);  
  var totalSparks = 0;  
  //-------------------------------  

  function initAll(){  
if(!ns && !ie &&!ns6){  
sparksOn = false;  
return;  
}  
  setInterval("firework()",intervals)  

  if (ns)  
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);  
for(dNum=0; dNum<7; ++dNum){  
if(ie)  
allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');  
else if (ns6)  
allDivs[dNum]=document.getElementById('sDiv'+dNum).style;  
else  
allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');  
}  
  }  

  function firework(){  
  //below code detects the browser dimenions  
  if (ie){  
  documentWidth=document.body.clientWidth  
  documentHeight=document.body.clientHeight  
  leftcorner=document.body.scrollLeft  
  topcorner=document.body.scrollTop  
  }  
  else if (ns||ns6){  
  documentWidth=window.innerWidth  
  documentHeight=window.innerHeight  
  leftcorner=pageXOffset  
  topcorner=pageYOffset  

  }  
  //below code randomly generates a set of coordinates that fall within the dimension  
  randomx=leftcorner+Math.floor(Math.random()*documentWidth)  
  randomy=topcorner+Math.floor(Math.random()*documentHeight)  

if(sparksOn){  
if(!sparksAflyin){  
sparksAflyin=true;  
totalSparks=0;  
for(var spark=0;spark<=6;spark++){  
dx=Math.round(Math.random()*50);  
dy=Math.round(Math.random()*50);  
moveTo(spark,randomx,randomy,dx,dy);  
}  
}  
}  
  }  

  function moveTo(i,tempx,tempy,dx,dy){  
if(ie){  
if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))  
tempy=document.body.offsetHeight+document.body.scrollTop-80;  
if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))  
tempx=document.body.offsetWidth+document.body.scrollLeft-80;  
}  
else if(ns6){  
if(tempy+80>(window.innerHeight+pageYOffset))  
tempy=window.innerHeight+pageYOffset-80;  
if(tempx+80>(window.innerWidth+pageXOffset))  
tempx=window.innerWidth+pageXOffset-80;  
}  
if(tempx>-50&&tempy>-50){  
tempx+=dx;tempy+=dy;
allDivs[i].left=tempx;  
allDivs[i].top=tempy;  
dx-=power;dy-=power;  
setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)  
}  
else  
++totalSparks  
if(totalSparks==7){  
sparksAflyin=false;  
totalSparks=0;  
}  
  }  
  window.onload=initAll  
  //End-->  
  </script>  

  <style>  
  #sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}  
  #sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}  
  #sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}  
  #sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;}  
  #sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}  
  #sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}  
  #sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}  
  </style>


Далее после:
Код
<body>


Вставляйте:
Код
<div id="sDiv0">*</div>  
  <div id="sDiv1">*</div>  
  <div id="sDiv2">*</div>  
  <div id="sDiv3">*</div>  
  <div id="sDiv4">*</div>  
  <div id="sDiv5">*</div>  
  <div id="sDiv6">*</div>


Всё! Настройка скрипта завершена и можете наслаждаться эффектом

Материал подготовил Apocalypse

Категория: Яваскрипты | Добавил: Apocalypse | Теги: сайте, эффект, на, вашем, фейерверка
Просмотров: 626 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: