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. :)
Lager som "flyter" in vid onload?
8 svar · 293 visningar · startad av Jesper T
Det borde nästan finnas något sådant på http://www.dhtmlcentral.com/ ;)
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>
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+' \ '
Tack, funkar bra i I.E. 6.0
Vet du hur det är med andra browsers?
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?
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'
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);