Avatar billede smukke Nybegynder
14. september 2000 - 15:39 Der er 4 kommentarer og
1 løsning

En animation oveni et billede

Jeg har fået fat i et script på nettet, der lader et billede glide ned over skærmen.
Koden ser således ud:


<SCRIPT LANGUAGE=\"JavaScript\">
var isNS = ((navigator.appName == \"Netscape\") && (parseInt(navigator.appVersion) >= 4));
var _all = \'\';
var _style = \'\';
var wwidth, wheight;
var ydir = \'++\';
var xdir = \'++\';
var id1, id2, id3;
var x = 1;
var y = 1;
var x1, y1;
if(!isNS) {
_all=\'all.\';
_style=\'.style\';
}
function getwindowsize() {
clearTimeout(id1);
clearTimeout(id2);
clearTimeout(id3);
if (isNS) {
wwidth = window.innerWidth - 55;
wheight = window.innerHeight - 50;
} else {
wwidth = document.body.clientWidth - 55;
wheight = document.body.clientHeight - 50;
}
id3 = setTimeout(\'randomdir()\', 20000);
animate();
}
function randomdir() {
if (Math.floor(Math.random()*2)) {
(Math.floor(Math.random()*2)) ? xdir=\'--\': xdir=\'++\';
} else {
(Math.floor(Math.random()*2)) ? ydir=\'--\': ydir=\'++\';
}
id2 = setTimeout(\'randomdir()\', 20000);
}
function animate() {
eval(\'x\'+xdir);
eval(\'y\'+ydir);
if (isNS) {
pic1.moveTo((x+pageXOffset),(y+pageYOffset))
} else {
pic1.pixelLeft = x+document.body.scrollLeft;
pic1.pixelTop = y+document.body.scrollTop;
}
if (isNS) {
if (pic1.top <= 5+pageYOffset) ydir = \'++\';
if (pic1.top >= wheight+pageYOffset) ydir = \'--\';
if (pic1.left >= wwidth+pageXOffset) xdir = \'--\';
if (pic1.left <= 5+pageXOffset) xdir = \'++\';
} else {
if (pic1.pixelTop <= 5+document.body.scrollTop) ydir = \'++\';
if (pic1.pixelTop >= wheight+document.body.scrollTop) ydir = \'--\';
if (pic1.pixelLeft >= wwidth+document.body.scrollLeft) xdir = \'--\';
if (pic1.pixelLeft <= 5+document.body.scrollLeft) xdir = \'++\';
}
id1 = setTimeout(\'animate()\', 30);
}

</script>


..HTML´en ser således ud:

<BODY OnLoad=\"getwindowsize()\" bgcolor=\"white\" OnResize=\"getwindowsize()\" style=\"margin-top : 0px;\">
<DIV id=\"pic1\" style=\"position:absolute; visibility:visible; left:0px; top:0px; z-index:-1\">
<IMG src=\"grafik/billede.gif\" border=\"0\">
</DIV>
<SCRIPT language=\"javascript\">
var pic1=eval(\'document.\'+_all+\'pic1\'+_style);
</SCRIPT>

..Mit problem er nu, at jeg gerne vil have det til at vises på en side, hvor der ligger nogle store billeder. Animationen skal så køre henover disse billeder. FOr en gangs skyld går det fint i Netscape - men i Explorer \"gemmer\" animationen sig omme bagved billederne og kigger så kun frem en gang imellem, når den når helt til yderkanterne af billederne. Er der nogen, der har en løsning på problemet?
Avatar billede erikjacobsen Ekspert
14. september 2000 - 15:46 #1
Prøv at sætte andre værdier ind for  z-index:-1  måske et stort tal
Avatar billede smukke Nybegynder
14. september 2000 - 15:53 #2
Fedt! Det virker - så du får dine velfortjente points.
Må jeg være lidt fræk og spørge, om du også ved, hvordan man får skidtet til at holde op efter et stykke tid???
Avatar billede erikjacobsen Ekspert
14. september 2000 - 16:01 #3
Grundlæggende skal du

  clearTimeout(id1);

på et passende tidspunkt. Det kan du gøre inde i function animate() hvor du f.eks. tæller hvor mange gange
den har været kaldt. Efter f.eks. 1000 gange kan du gør det. Vil du vide mere??
Avatar billede smukke Nybegynder
15. september 2000 - 08:45 #4
Mjaaa...jeg forstår godt princippet i det, jeg kan bare ikke lige få det til at fungere med at tælle på, hvor mange gange, den har været kaldt.
Avatar billede erikjacobsen Ekspert
15. september 2000 - 10:15 #5
Lige før function animate() laver vi en global variabel

  counter=0;

og indeni gør vi så:

function animate() {
  count++;
  if (count>=1000) { clearTimeout(id1); }
  eval(\'x\'+xdir);
  eval(\'y\'+ydir);
.....osv


(tror jeg nok)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester