javascript div scrollen

setInterval in diesem code funktioniert nicht richtig

<script language="javascript">
    x = y = 0;
    function mvtb(p, g){
        i = 0;
        tmp = setInterval(function (){
            if(i < 100 && i >= 0){
                document.getElementById("plan").scrollTop = 200*(y+((y-g)*(i/100)));
                document.getElementById("plan").scrollLeft = 660*(x+((x-p)*(i/100)));
                i++;
            }
            else if(i == 100){
                clearInterval(tmp);
            }
        }, 10);
        x = p; y = g;
    }
</script>

CSS

<style>
#plan {overflow: hidden; height: 200px; width: 660px; background: #444;}
.plan {width: 1980px;}
.plan table {height: 200px; width: 660px;}
</style>

HTML

<body style="background: black; color: white;">
<center>
<div id="plan">
<table class="plan">
    <tr id="g0">
        <td class="p0"><table bgcolor="gray"><tr><td>0 0</td></tr></table></td>
        <td class="p1"><table bgcolor="blue"><tr><td>1 0</td></tr></table></td>
        <td class="p2"><table bgcolor="yellow"><tr><td>2 0</td></tr></table></td>
    </tr>
    <tr id="g1">
        <td class="p0"><table bgcolor="green"><tr><td>0 1</td></tr></table></td>
        <td class="p1"><table bgcolor="orange"><tr><td>1 1</td></tr></table></td>
        <td class="p2"><table bgcolor="red"><tr><td>2 1</td></tr></table></td>
    </tr>
    <tr id="g2">
        <td class="p0"><table bgcolor="brown"><tr><td>0 2</td></tr></table></td>
        <td class="p1"><table bgcolor="white"><tr><td style="color: black">1 2</td></tr></table></td>
        <td class="p2"><table bgcolor="crimson"><tr><td>2 2</td></tr></table></td>
     </tr>
</table>
</div>
<br /><br /><br />Move Table<br />
<button onClick="mvtb(0, 0);">0 0</button> &nbsp; <button onClick="mvtb(1, 0);">1 0</button> &nbsp; <button onClick="mvtb(2, 0);">2 0</button><br />
<button onClick="mvtb(0, 1);">0 1</button> &nbsp; <button onClick="mvtb(1, 1);">1 1</button> &nbsp; <button onClick="mvtb(2, 1);">2 1</button><br />
<button onClick="mvtb(0, 2);">0 2</button> &nbsp; <button onClick="mvtb(1, 2);">1 2</button> &nbsp; <button onClick="mvtb(2, 2);">2 2</button><br />
</center>
</body>
  • Sie nicht Einrücken?
  • Fixed @epascarello 😉 OP haben Sie ein Stück HTML-Code, der aus der Ort, </td> <td class="p2"><table bgcolor="crimson"><tr><td>2 2</td></tr></table></td> </tr> </table>
  • HTML ist okay, es ist nur schwer zu analysieren alle der geschachtelten Tabellen.
  • setInetval funktioniert nicht mehr
  • jeder Weg, um es zu beheben?
InformationsquelleAutor R. 久蔵 | 2011-08-31
  1. 5

    Versuchen, diese stattdessen. Nur aktualisieren, g und p, nachdem die animation beendet ist und die swap-Subtraktion bei der Berechnung der neuen scrollTop/scrollLeft. Sie müssen auch sicherstellen, dass die Schleife 100 mal, nicht 99. JSFiddle

    x = y = 0;

function mvtb(p, g) {
    var i = 1;
    var tmp = setInterval(function() {
        if (i <= 100 ) { 
            document.getElementById("plan").scrollTop = 200 * (y + ((g - y) * (i / 100)));
            document.getElementById("plan").scrollLeft = 660 * (x + ((p - x) * (i / 100)));
            i++;
        }
        else {
            clearInterval(tmp);
            x = p;
            y = g;
        }
    }, 10);
}
    • Dieser code ausgeführt wird 101 mal. (das "Dokument.bekommen [...]" - Teil)
    • Du hast Recht - sollte nur beginnen bei 1, denn 0 ist die gleiche position, an der es sich befand, bevor der auf
    InformationsquelleAutor Dennis
  2. 2

    Verwenden Sie die var-Anweisung zur Schließung richtig zu arbeiten.
    Überprüfen Sie für >=.

    (i ist eine wirklich schlechte Namen und Sie wahrscheinlich verwenden Sie es an anderer Stelle und setzen Sie es in den globalen Kontext.)

    Gibt es ein anderes problem mit Ihrer x -, y -, p-und g -. Aber ich bin mir nicht sicher, was diese Werte werden verwendet für... ich denke, dass müssen Sie möglicherweise zwei weitere Variablen, aber ich bin mir nicht sicher.

     <script language="javascript">
    var x = y = 0;
    function mvtb(p, g){
      var i = 0;
      tmp = setInterval(function (){
        if(i < 100 && i >= 0){
          document.getElementById("plan").scrollTop = 200*(y+((y-g)*(i/100)));
          document.getElementById("plan").scrollLeft = 660*(x+((x-p)*(i/100)));
          i++;
        }
        else if(i >= 100){
         clearInterval(tmp);
        }
     }, 10);
     x = p;
     y = g;
  }
</script>
    • var i = 0; ist keine gute Idee
    • Warum nicht, es ist eine variable zählt bis 100, die beginnend bei 0?
    • Denken Sie daran var i=0 nur einmal ausgeführt werden für alle 100 mal die call-back-Funktion ausgeführt wird. Es ist Teil des Verschlusses.
    • setInetval funktioniert nicht mehr
    InformationsquelleAutor Hogan
Schreibe einen Kommentar