Notifikationer

Markér alle som læst Log ud

mini-me Nybegynder

19. januar 2007 - 13:54 Der er 7 kommentarer og
1 løsning

Flyvende billede

Hej,

Jeg har brug for noget kode der gør det muligt at få et billede til at komme flyvende ind fra venstre-bund og så ende x pixels fra højre top.

Nogen der kan være behjælpelige med dette?

Synes godt om

mini-me Nybegynder

20. januar 2007 - 11:26 #1

Nogle javascript eksperter der kan komme med noget input...

Synes godt om

mini-me Nybegynder

20. januar 2007 - 12:48 #2

http://www.dynamicdrive.com/dynamicindex4/xoomimage.htm <-- søger noget ligesom dette, det skal dog bare komme fra venstrebund til højre top og så stoppe der.

Synes godt om

roenving Novice

20. januar 2007 - 13:02 #3

Hrm, jeg mangler noget, men kan ikke huske det på stående fod, det kommer nok senere, men lige nu står der altså 0 som alternativ til vinduets dimensioner ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Flying picture</title>

<style type="text/css">
html,body{margin:0;padding:0;height:100%;}
</style>

<script type="text/javascript">
//position til slut
var newTop = 30,newRight = 30;
var wHeight,wWidth,pHeight,pWidth,distHoriz,distVert,percMoved=0,pic;
window.onload = function(){
pic = document.getElementById("flyingPic")
pHeight = pic.offsetHeight;
pWidth = pic.offsetWidth;
// alert(pHeight+"\n"+pWidth);
wHeight = window.innerHeight ? window.innerHeight : document.body.offsetHeight ? document.body.offsetHeight : 0;
wWidth = window.innerWidth ? window.innerWidth : document.body.offsetWidth ? document.body.offsetWidth : 0;
// alert(wHeight+"\n"+wWidth);
pic.style.left = -pWidth + "px";
pic.style.top = wHeight + "px";
distVert = wHeight - newTop;
distHoriz = wWidth - newRight;
// alert(distVert+"\n"+distHoriz);
movePic();
}
function movePic(){
percMoved += 0.5;
// document.getElementById("percM").firstChild.nodeValue = percMoved;
var actLeft = Math.floor(percMoved*distHoriz/100) - pWidth + "px";
pic.style.left = actLeft;
// document.getElementById("actL").firstChild.nodeValue = actLeft;
var actTop = wHeight - Math.floor(percMoved*distVert/100) + "px";
pic.style.top = actTop;
// document.getElementById("actT").firstChild.nodeValue = actTop;
if(100>percMoved){
setTimeout("movePic()",30);
}
}
</script>

</head>
<body>

<img id="flyingPic" src="http://www.eksperten.dk/img/elogo.png" style="position:absolute;left:-200px;">



</body>
</html>

Synes godt om

mini-me Nybegynder

20. januar 2007 - 13:29 #4

Hej tak, det virker faktisk, men kan man få det til at kører lidt mere "smoooth" den hakker især ved brug af et større billede?

men smid svar

Synes godt om

roenving Novice

20. januar 2007 - 13:35 #5

Problemet er time-outen, som, såvidt jeg husker, ikke bliver hurtigere under ca. 32 millisekunder, så nej, jeg tror det bliver svært ...

-- dog kunne jg få den til overordnet at køre glattere ved at sætte timeout til 10 og procentændringen til 0.25 ...

-- men f.eks. i min FireFox, var der ikke kræfter i maskinen til at holde den kørende absolut glat !-)

-- els velbekomme '-)

Synes godt om

mini-me Nybegynder

20. januar 2007 - 13:42 #6

Kunne man gøre sådan at man definerede et område den kørte i istedet?

eks. jeg opretter en div som har width og height 800 * 600 og så at den afvikles idette område?

Synes godt om

roenving Novice

20. januar 2007 - 14:03 #7

Ja, grundlæggende skal du bare ændre definitionen af wHeight og -Width, samt sætte diven udenom:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Flying picture</title>

<meta name="Generator" content="Stone's WebWriter 4">
<style type="text/css">
html,body{margin:0;padding:0;height:100%;}
#site{width:800px;height:600px;overflow:hidden;margin:0 auto;border:1px solid red;position:relative;}
</style>

<script type="text/javascript">
//position til slut
var newTop = 30,newRight = 30;
var wHeight,wWidth,pHeight,pWidth,distHoriz,distVert,percMoved=0,pic;
window.onload = function(){
pic = document.getElementById("flyingPic")
pHeight = pic.offsetHeight;
pWidth = pic.offsetWidth;
// alert(pHeight+"\n"+pWidth);
wHeight = document.getElementById("site").offsetHeight;
wWidth = document.getElementById("site").offsetWidth;
// alert(wHeight+"\n"+wWidth);
pic.style.left = -pWidth + "px";
pic.style.top = wHeight + "px";
distVert = wHeight - newTop;
distHoriz = wWidth - newRight;
// alert(distVert+"\n"+distHoriz);
movePic();
}
function movePic(){
percMoved += 0.25;
// document.getElementById("percM").firstChild.nodeValue = percMoved;
var actLeft = Math.floor(percMoved*distHoriz/100) - pWidth + "px";
pic.style.left = actLeft;
// document.getElementById("actL").firstChild.nodeValue = actLeft;
var actTop = wHeight - Math.floor(percMoved*distVert/100) + "px";
pic.style.top = actTop;
// document.getElementById("actT").firstChild.nodeValue = actTop;
if(100>percMoved){
setTimeout("movePic()",10);
}
}
</script>

</head>
<body>

<div id="site">
<img id="flyingPic" src="http://www.eksperten.dk/img/elogo.png" style="position:absolute;left:-200px;">
</div>



</body>
</html>

Synes godt om

roenving Novice

20. januar 2007 - 14:30 #8

-- og tak for point ;~}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS