3.2k Aufrufe
Gefragt in Skripte(PHP,ASP,Perl...) von
Hallo zusammen,

hoffentlich bin ich in der richtigen Fore falls nicht entschuldigt bitte und verschiebt es.
Ich bräuchte euere Hilfe und zwar: ein kleines Div sollte sich zu einem Mausklick hinbewegen. Den Code hab ich schon "gefunden" aber da "springt" es quasi zu dem Mausklick. Ich möchte aber das es sich mehr oder weniger dahin "moved" bzw. dahingleitet.
Da ich sehr sehr sehr wenige Kentnisse in JavaScript habe und sie mir auch ungern aneignen möchte da ich sehr selten JavaScript einsetze hätte ich gerne das ihr bitte bitte in den unten stehenden Code ein "moveeffekt" einbaut.

Vielen Dank im vorraus!


Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (document.getElementById) {
document.getElementById("Springer").style.left = Ereignis.clientX + "px";
document.getElementById("Springer").style.top = Ereignis.clientY + "px";
} else if (document.all) {
document.all.Springer.style.left = Ereignis.clientX;
document.all.Springer.style.top = Ereignis.clientY;
}
}

document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
<p>Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.</p>
</body>
</html>

11 Antworten

0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
probier's mal so

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
jump(Ereignis.clientX,Ereignis.clientY);
}
function jump(x,y) {
var spring=document.getElementById("Springer");
if (spring) {
var sx=spring.style.left;
var sy=spring.style.top;
if (Math.abs(sx-x) < 10 && Math.abs(sy-y) < 10) {
spring.style.left=x+"px";
spring.style.top=y+"px";
} else {
spring.style.left=parseInt((x-sx)/100)+"px";
spring.style.top=parseInt((y-sy)/100)+"px";
window.setTimeout("jump("+x+","+y+")",500);
}
}
document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
<p>Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.</p>
</body>
</html>


wie du vielleicht erkennst wird mit einer Verzögerung von 500 ms eine Funktion jump immer wieder aufgerufen, die das DIV näher an die Koordinaten schieben soll. Wenn das DIV dem Ziel nahe ist (<10) wird der Rest in einem Sprung gemacht. Das verhindert, dass das Programm endlos läuft. Die Werte bei <10, /100 und 500 müsstest du noch deinen Bedürfnissen anpassen. Ich empfehle den Test im Firefox und die Nutzung dessen Fehlerkonsole, falls irgendwas nicht funktioniert. Mit den Fehlermeldungen könnten wir dann weiter sehen, denn ich habe es natürlich nicht getestet. Übrigens habe ich den document.all-Kram entfernt. Es gibt keine Browser mehr, die das so brauchen.

katy
0 Punkte
Beantwortet von
Hallo!

Vielen herzlichen Dank das du dir die mühe gemacht hast, aber leider funktioniert es (bei mir) nicht :(
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
leider funktioniert es (bei mir) nicht
ist keine Fehlerbeschreibung! Hast du meinen Beitrag nicht gelesen?

katy
0 Punkte
Beantwortet von supermax Experte (4.8k Punkte)
Liegt möglicherweise am Browser, denn die verschiedenen Browser verwenden teilweise unterschiedliche Eigenschaften des event-Objekts, um die Mausposition zu speichern.

Siehe auch diese Seite auf Quirksmode
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
@Supermax:
das ist schon berücksichtigt mit
function Mausklick (Ereignis) {
if (!Ereignis) Ereignis = window.event;
...

(den Code hat Malochnix direkt aus SelfHTML kopiert)

katy
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Ich hab' es gegen meine Gewohnheit doch mal selbst getestet, und so funktionierts nun:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis) Ereignis = window.event;
var spring=document.getElementById("Springer");
if (spring) {
spring.x=Ereignis.clientX;
spring.y=Ereignis.clientY;
}
jump();
}
function jump() {
var spring=document.getElementById("Springer");
if (spring) {
var sx=parseInt(spring.style.left);
var sy=parseInt(spring.style.top);
if (Math.abs(sx-spring.x) < 10 && Math.abs(sy-spring.y) < 10) {
spring.style.left=spring.x+"px";
spring.style.top=spring.y+"px";
} else {
spring.style.left=parseInt(sx+(spring.x-sx)/100)+"px";
spring.style.top=parseInt(sy+(spring.y-sy)/100)+"px";
window.setTimeout("jump()",100);
}
}}
document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
<p>Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.</p>
</body>
</html>


hättest du die Fehlerkonsole befragt, wären dir die fehlende } und der Typenfehler bei der Subtraktion sicher aufgefallen.
Der Rest sind Verbesserungen, insbesondere zur Variablen-/Parameterübergabe zwischen den Funktionen.

katy
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
nun hat mich der Drang zur Perfektion erwischt. Besser ist diese Variante:

<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis) Ereignis = window.event;
var spring=document.getElementById("Springer");
if (spring) {
spring.x=Ereignis.clientX;
spring.y=Ereignis.clientY;
jump();
}
}
function jump() {
var spring=document.getElementById("Springer");
if (spring) {
var sx=parseInt(spring.style.left);
var sy=parseInt(spring.style.top);
var dx=spring.x-sx;
var dy=spring.y-sy;
spring.style.left=parseInt(sx+dx/Math.max(1,Math.abs(dx)))+"px";
spring.style.top=parseInt(sy+dy/Math.max(1,Math.abs(dy)))+"px";
if (Math.abs(dx) + Math.abs(dy) > 0) window.setTimeout("jump()",100);
}
}
document.onmousedown = Mausklick;
</script>


viel Spaß

katy
0 Punkte
Beantwortet von
Vielen herzlichen Dank nochmal! Tut mir leid ich hab vor lauter Freude wohl überlesen das ich es selbst testen sollte.

Klappt wunderbar bis auf die Geschwindigkeit: Bei gleich eingestellter Verzögerung bewegt sich das Div mal schnell mal langsam. Liegt das an meinem PC oder wo könnte der Fehler liegen (abgesehen von dem script natürlich)?
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
das liegt daran, dass du bei mehrfachem Klicken das Skript mehrfach startest und entsprechend öfter die Funktion jump gestartet wird.

Die Version in Antwort 7 ist nicht ganz so anfällig dafür (hat auch nur noch einen Parameter zur Geschwindikeitseinstellung), aber um das Problem auszuschalten stünde der Programmieraufwand in keinem Verhältnis zum Nutzen.

katy
0 Punkte
Beantwortet von
Ok.

Eine letzte frage noch: ist es möglich das sich während sich das Div bewegt die Farbe wechselt? Oder es durch ein anderes ersetzt wird?
...