Flyvende billede

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

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.

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>

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

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 '-)

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?

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>

-- og tak for point ;~}