Avatar billede 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?
Avatar billede mini-me Nybegynder
20. januar 2007 - 11:26 #1
Nogle javascript eksperter der kan komme med noget input...
Avatar billede 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.
Avatar billede 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;">

<!-- test-spans
%: <span id="percM">&nbsp;</span>%<br>
Left: <span id="actL">&nbsp;</span><br>
Top: <span id="actT">&nbsp;</span><br>
-->

</body>
</html>
Avatar billede 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
Avatar billede 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 '-)
Avatar billede 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?
Avatar billede 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>

<!-- test-spans
%: <span id="percM">&nbsp;</span>%<br>
Left: <span id="actL">&nbsp;</span><br>
Top: <span id="actT">&nbsp;</span><br>
-->

</body>
</html>
Avatar billede roenving Novice
20. januar 2007 - 14:30 #8
-- og tak for point ;~}
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