✔ Problem mit Javascript und Mouseover

B

BorntToFlyBert

Grünschnabel
Hallo liebe Helfer!

Habe eine Script erstellt, das einen Div-Container nach links und rechts bewegt. Das Problem ist dass, wenn ich kurz hintereinander über diesen Container mit der Mouse drüber fahre funktioniert es nicht richtig oder gar nicht mehr. Im Google Chrome geht es gar nicht. Warum?
Javascript: 
<html>
<head>
<title>Container bewegt</title>
<script type="text/javascript">
var position=0;
var interval;
var isRunning = false;

function moveRight0()
{
    if (position => 20){

        position = 19;
   
    }       

    if (isRunning==true){
        isRunning = false;
        return;       
           
    }   

    if (isRunning==false) {        
   
        isRunning = true
        document.getElementById("container0").style.left = position+"px";
        position++;
   
        if(position==20)
        {   
            clearInterval(interval);
            interval=0;           
        }
   
    }
   
}

function moveLeft0()
{
    if (position < 1){

        position = 0;
   
    }
       

    if (isRunning==true){
        isRunning = false;
        return;       
    }       
   

    if (isRunning==false) {    
       
        isRunning = true
        document.getElementById("container0").style.left = position+"px";
        position--;
        if(position<1)
        {
       
            clearInterval(interval);
            interval = 0;
        }

    }   

}

function al(){
    alert(interval);
}

function setIntervalLeft0()
{   
    interval = setInterval(moveLeft0,10);
}

function setIntervalRight0()
{   
    interval = setInterval(moveRight0,10);
}


</script>
</head>
<body>
<div onmouseover="setIntervalRight0()" onmouseout="setIntervalLeft0()" id="container0" style="width:50px; height:20px; position:absolute; z-index:1; top:0px; left:0px">text</div><br><br>
<input type="button" onclick="al()" name="zeige">
</body>
</html>
Danke für sinnvolle Antworten ;)
 
Zuletzt bearbeitet von einem Moderator:
Alternatives browserübergreifend funktionstüchtiges JS:
Javascript: 
function init(){
  if(document.getElementById){
    obj = document.getElementById("container0");
    obj.style.left = "0";
  }
}
function slideRight(){
  if(obj){
    if(parseInt(obj.style.left) < 20){
      obj.style.left = parseInt(obj.style.left) + 5 + "px";
      setTimeout(slideRight, 5);
    }
  }
}
function slideLeft(){
  if(obj){
    if(parseInt(obj.style.left) > 0){
      obj.style.left = parseInt(obj.style.left) - 5 + "px";
      setTimeout(slideLeft, 5);
    }
  }
}
window.onload = function(){
  init();
}
HTML: 
<div onmouseover="slideRight()" onmouseout="slideLeft()" ...>
Und nutze bitte zukünftig zur Quellcode-Präsentation die Code-Tags: https://www.tutorials.de/help/bb-codes#codetag

Edit: Ein Moderator hat zwischenzeitlich deinen Beitrag entsprechend überarbeitet.
 
Zuletzt bearbeitet:
Hallo!

Danke für die Hilfe, habe gesehen, dass ich in meinem Code einen Fehler hatte, habe diesen behoben und es funktioniert auch nun in Chrome.

Danke für die Korrektur an den Admin vom Code im Beitrag und den alternativen Code!

Leider ist das Problem bei dem Code im Beitrag und meinem Code noch nicht ganz gelöst, wenn man nämlich unabsichtlich mehrmals über den div Container drüber fährt, legt sich glaube ich das onMouseOver quer. Es gibt ja so weit ich weis kein onMouseIn in Javascript.

Danke für eure Antworten.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück