nicht angemeldet
geeignete Schleife zum layer verschieben (bitte lesen)
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, bitte um Hilfe
Danke
<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>
-
hi,
bitte poste nur den relevanten Code.
Hier mal ein Testscript, so klappt es. Beachte, das Du im NC6 und IE die Div-Layerposition mit obj.left/top nur herausfindest, wenn Du sie zuvor mit JS zugewiesen hattest - passiert hier in "initMove()"Gruss Joachim
<html>
<head><style type="text/css">
#ebene0 {position:absolute; top:100px; left:50px; width:50px; height:100px; visibility:visible;}
</style>
<script language="javascript1.2">
// some known objects
var nc = !!(document.captureEvents && !document.getElementById);
var ie4 = !!(document.all && !document.documentElement);// einfache div-layer referenzieren
function dRefS(num) {return (nc? document.layers[num] : (ie4? document.all[num].style : document.getElementById(num).style))}// id, zielposition x und y, Geschwindigkeit
function move(id,x,y,speed)
{
aktX = parseInt(dRefS(id).left);
aktY = parseInt(dRefS(id).top);
distX = x - aktX;
distY = y - aktY;dist = Math.sqrt(distX*distX + distY*distY);
if(Math.abs(dist) < speed)
{
dRefS(id).left = x;
dRefS(id).top = y;
return;
}
dRefS(id).left = aktX + distX / dist * speed;
dRefS(id).top = aktY + distY / dist * speed;
run = setTimeout("move('" + id + "'," + x + "," + y + "," + speed + ")", 50);
}// id, startposition x und y, zielposition x und y, Geschwindigkeit
function initMove(id, startX, startY, x, y, speed)
{
dRefS(id).left = startX;
dRefS(id).top = startY;
move(id,x,y,speed);
}</script>
</head>
<body>
<a href="#" onclick="initMove('ebene0',50,50,500,600,10); return false;">bewegen</a><div id="ebene0">xxx</div>
</body>
</html>