webForumDet fria alternativet
Logga in / Bli medlem

Lager som "flyter" in vid onload?

JavaScript

8 svar · 295 visningar · startad av Jesper T

Medlem sedan nov. 20017 144 inlägg
Trådstart#1

Hur skapar man lämpigast ett lager som "flyter" in ifrån högra sidan på webbläsaren och lägger sig på bestämd plats?
Det skadar inte heller att det är crossbrowser. :)

Medlem sedan dec. 20003 563 inlägg
#2

Det borde nästan finnas något sådant på http://www.dhtmlcentral.com/ ;)

Medlem sedan sep. 20021 655 inlägg
#3

Så här kanske?

<script type="text/javascript">
window.onload=function(){
  document.getElementById('flyttkarl').style.left=screen.availWidth+'px';
  flytta('flyttkarl', 200)
}

function flytta(objId, min){
  if(parseInt(document.getElementById(objId).style.left)>min){
    document.getElementById(objId).style.left=parseInt(document.getElementById(objId).style.left)-5+'px';
    setTimeout('flytta(\''+objId+'\','+min+')', 20);
  }
}
</script>

<style type="text/css">
html, body {
  margin: 0;
  overflow: hidden;
}

#flyttkarl {
  position: absolute;
  height: 130px;
  width: 130px;
  padding: 20px;
  border: 1px solid #000;
  font: bold 10px Verdana;
}
</style>

...

<div id="flyttkarl">Jag flyger in från höger, och stannar 200px från vänsterkanten</div>
Medlem sedan nov. 20017 144 inlägg
#4

Tack, men...
fel: ")" förväntas
rad: 19

rad19 --> setTimeout('flytta(''+objId+'','+min+')', 20);

Medlem sedan sep. 20021 655 inlägg
#5

Det blev visst galet när jag lade in koden här.

Så här ska det skrivas:

setTimeout('flytta(x''+objId+'x','+min+')', 20);

Ersätt x med ett \, så det blir så här, utan mellanslag:

\ ' '+objId+' \ '
Medlem sedan nov. 20017 144 inlägg
#6

Tack, funkar bra i I.E. 6.0
Vet du hur det är med andra browsers?

Medlem sedan nov. 20017 144 inlägg
#7

Jag märkte att man kan få den att gå fortare genom att ändra siffran. Men hur får man det hela att gå ännu fortare?

Medlem sedan sep. 20021 655 inlägg
#8

Jag har testat i Mozilla och Opera, och det fungerade hur bra som helst.

På denna raden kan du ändra femman till ett större tal, för att rutan ska flyttas ett större steg varje gång:

document.getElementById(objId).style.left=parseInt(document.getElementById(objId).style.left)-5+'px'
Medlem sedan juni 2003771 inlägg
#9

För att få en mjuk flyttning så ange stegen till -15, och tiden mellan varje steg till 40, eller nåt i närheten av det.

document.getElementById(objId).style.left=parseInt(document.getElementById(objId).style.left)-15+'px';
setTimeout('flytta(\''+objId+'\','+min+')', 40);
258 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
126 ms — deklarationer (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)
127 ms — ändringar (db)