WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY
Efekty - Ohňostroj
Normální položka
Zobrazeno: 8455

Popis: Docela pěkný ohňostroj na stránce.
Funkčnost: Funkční v IE 5.5 a vyšší,
Hodnocení: ****
Ukázka
Následující kód si vložte mezi tagy <HEAD> a </HEAD>. 

<script language="Javascript">
// Fireworks Script
// Craig Blanchette - Craiga    http://www.Craiga.us
// Works in IE5+ and NS6+

howmany     = 80                                                // How many sparks come off firework?
howbig      = 40                                                // How big (radius, will be about 8 times as big as this number)
launchspeed = 10                                                // Speed of the launcher
colors = new Array('yellow','orange','blue','white','red','lightgreen');  // Colors of sparks

function spark(div)
{
  this.css    = document.getElementById(div).style;

  this.show   = function()   { this.css.visibility="visible"; }
  this.hide   = function()   { this.css.visibility="hidden"; }
  this.moveTo = function(x,y){ this.x=x; this.y=y; this.css.left=x; this.css.top=y; }
  this.bg     = function(col){ this.css.backgroundColor=col; }
  this.resize = function(w,h){ this.css.overflow="hidden"; this.css.width=w; this.css.height=h; }

  return this;
}

function init(){
  if(parseInt(launch.top) > center_y){
     launch.top = parseInt(launch.top)-launchspeed;
     setTimeout('init()',1);
  }else{
     launch.visibility="hidden";
     for(i=0;i<sparks.length;i++){
       sparks[i].show();
       sparks[i].inc = (Math.random()*10);
       sparks[i].ang = (Math.random()*360);
     }
     counter = 0;
     doExplode();
  }
}

function doExplode(){
  if(counter < howbig){
    counter++;
    for(i=0;i<sparks.length;i++){
      x = center_x + (counter*sparks[i].inc) * Math.sin(sparks[i].ang * Math.PI/180);
      y = center_y + (counter*sparks[i].inc) * Math.cos(sparks[i].ang * Math.PI/180);
      sparks[i].moveTo(x,y);
    }
   setTimeout('doExplode()',1);
  }else{
    for(i=0;i<sparks.length;i++){
      sparks[i].hide();
    }
    launch.visibility="visible";
    getDimens();
    launch.top = bottom-15;
    launch.left = l;
    init();
   }
}

function getDimens(){
    if(document.all){
      bottom = document.body.clientHeight;
      width  = document.body.clientWidth;
    }else{
      bottom = innerHeight;
      width  = innerWidth;
    }
      center_y = (bottom/2)-50;
      center = width/2;
      l = (Math.random()*(width/2))+(width/4);
      center_x = l;
}
</script>

Následující kód si vložte dovnitř tagu <BODY>. 

onload="starter()"

Následující kód si vložte mezi tagy <BODY> a </BODY>. 

<script language="Javascript">
sparks = new Array();
  document.write('<div id="launcher" style="position: absolute; width: 3; height: 15; overflow: hidden; background-color: white"></div>');
  launch = document.getElementById('launcher').style;
for(i=0;i<howmany;i++){
  document.write('<div id="spark'+i+'" style="position: absolute"></div>');

  sparks[i] = new spark('spark'+i);
  sparks[i].resize(1,1);
  sparks[i].hide();
  num = Math.round(Math.random()*(colors.length-1))
  col = colors[num];
  sparks[i].bg(col);
}
function starter(){
getDimens();
launch.top = bottom-15;
launch.left = l;
init();
}
</script>