Problem beim bewegen eines Bildes
AbBa
- javascript
Hab einen Code wegen clientX und clientY gefunden :D
Ein Layer bewegt sich zur Mausposition bei Mousedown.
Jetzt wollte ich ausprobieren, ob es auch so gehen würde,
dass sich das Bild in einer bestimmten Zeit dorthin bewegt.
So wie der Quelltext bei selfhtml ist, ist der Layer in 0.000 Sekunden da wo er ankomment sollte, und ich wollte halt, dass es dafür mehrere Sekungen braucht. Ich hab dann mal etwas "gebastelt":
<html><head><title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
var a = document.getElementById("Springer").style.left;
var b = document.getElementById("Springer").style.top;
var x = Ereignis.clientX + "px";
var y = Ereignis.clientY + "px";
if(a<x){
alert("a++");
a++;}
if(a>x){
alert("a--");
a--;}
if(b<y){
alert("b++");
b++;}
if(b>y){
alert("b--");
b--;}
}
document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#000000; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
</body></html>
Normalerweiste müsste sich der Layer bewegen. Ich habe sogar alerts daszwischen eingebaut, um zu wissen, welche aktion gerade ausgeführt wird. Es kommt aber, egal wo ich auch mit der maus hinklicke, a++ und b++. Und dass dumme daran ist: es bewegt sich nicht ein Pixel weit. Es bleibt einfach so stehen...
Ich sterbe gleich xD
Ich sterbe gleich xD
Herzliches Beileid.
Alexander
Hi,
<html><head><title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
if (!Ereignis)
Ereignis = window.event;
var a = document.getElementById("Springer").style.left;
var b = document.getElementById("Springer").style.top;
var x = Ereignis.clientX + "px";
var y = Ereignis.clientY + "px";
if(a<x){
alert("a++");
a++;}
if(a>x){
alert("a--");
a--;}
if(b<y){
alert("b++");
b++;}
if(b>y){
alert("b--");
b--;}
}
In dieser Funktion änderst du nirgends die Position des DIVs. Du liest sie nur in die Variablen a und b ein, setzt sie aber nirgends neu.
Versuchs mal mit
document.getElementById("Springer").style.left = a+'px';
am Schluss der Funktion, dann sollte sich das DIV um ein Pixel verschieben.
(Kann evtl. sein, dass bei a ein px dahinter steht, dieses muss dann wohl erst abgetrennt werden, damit du a mit a++ erhöhen kannst. Bin mir da nicht ganz sicher, aber das kannst du ja selbst ausprobieren)
mfG,
steckl