Layer Positionierung (Div)
Michl (mal wieder)
- javascript
Hallo, ich hab das problem das ich einen Layer zu den im Eingabefeld
angegebenen Koordinaten bewegen möchte. (zielwertx, zielwerty)
Die Bewegung soll Schrittweise erfolgen, wobei nach jedem einzelnen
Schritt eine kleine Zeitverzögerung stattfindet.
(langsames Abfahren der Strecke)
Sind die Zielkoordinaten erreicht, soll der Layer stoppen.
Die Stoppkoordinaten der ersten Fahrt, sind die Startkoordinaten
der nächsten Fahrt. usw..
ich komm da irgendwie nicht weiter
gruß Michl
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#999999" text="#000000">
<form name="Formular" action="">
<table width="47%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28%">aktposx</td>
<td width="72%">
<input type="text" name="aktposx" size="8">
</td>
</tr>
<tr>
<td width="28%">aktposy</td>
<td width="72%">
<input type="text" name="aktposy" size="8">
</td>
</tr>
<tr>
<td width="28%">zielwertx</td>
<td width="72%">
<input type="text" name="zielwertx" size="8">
</td>
</tr>
<tr>
<td width="28%" height="8">zielwerty</td>
<td width="72%" height="8">
<input type="text" name="zielwerty" size="8">
</td>
</tr>
<tr>
<td width="28%"> </td>
<td width="72%">
<input type="button" name="Abschicken" value="start" onClick="Start(document.Formular.zielwertx.value,document.Formular.zielwerty.value)">
</td>
</tr>
<tr>
<td width="28%"> </td>
<td width="72%"> </td>
</tr>
</table>
</form>
<div id="Layer1" style="position:absolute; visibility:visible; left:300px; top:300px; width:23px; height:25px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000"></div>
<script type="text/javascript">
<!--
function Start(ZielwertX,ZielwertY)
{
startposX = parseInt(document.Layer1.left); // Koordinaten vom Layer
startposY = parseInt(document.Layer1.top);
endposX = parseInt(ZielwertX); // Eingegebene Koordinaten
endposY = parseInt(ZielwertY);
streckex = endposX - startposX; // Strecke ermitteln
streckey = endposY - startposY;
streckez = Math.sqrt((streckex * streckex) + (streckey * streckey));
schrittzahl = Math.round(streckez / 3); // Schrittzahl festlegen
schrittweitex = Math.round(streckex / schrittzahl);
schrittweitey = Math.round(streckey / schrittzahl);
Richtung();
}
// Ermittlung der Richtung
function Richtung()
{
if((startposX<=endposX) && (startposY<=endposY)) Feld1();
if((startposX<=endposX) && (startposY>=endposY)) Feld2();
if((startposX>=endposX) && (startposY<=endposY)) Feld3();
if((startposX>=endposX) && (startposY>=endposY)) Feld4();
}
function Feld1()
{
while((startposX<=endposX) && (startposY<=endposY))
{
window.setInterval("SchiebeX()",100);
}
window.clearInterval("SchiebeX()");
}
function Feld2()
{
while((startposX<=endposX) && (startposY>=endposY))
{
window.setInterval("SchiebeX()",100);
}
window.clearInterval("SchiebeX()");
}
function Feld3()
{
while((startposX>=endposX) && (startposY<=endposY))
{
window.setInterval("SchiebeX()",100);
}
window.clearInterval("SchiebeX()");
}
function Feld4()
{
while((startposX>=endposX) && (startposY>=endposY))
{
window.setInterval("schiebeX()",100);
}
window.clearInterval("SchiebeX()");
}
function SchiebeX()
{
startposX=startposX+schrittweitex;
document.Layer1.left=startposX;
document.Formular.aktposx.value=startposX;
startposY=startposY+schrittweitey;
document.Formular.aktposy.value=startposY;
document.Layer1.top=startposY;
}
// -->
</script>
</body>
</html>