JavaScript的滾動DIV

setInterval在此代碼不能正常工作JavaScript的滾動DIV

<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>

來源

2011-08-31 R. 久蔵

您不縮進？ – epascarello

固定@epascarello ;-) OP，你有HTML的塊即出來的地方，' <表BGCOLOR = 「深紅色」>2 2 ' –

@Jason HTML是好的，它只是很難解析所有的嵌套表。 – Dennis

試試這個。只有在動畫完成後更新g和p，並在計算新的scrollTop/scrollLeft時交換減法。您還需要確保循環運行100次，而不是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); 
}

來源

2011-08-31 13:05:27 Dennis

此代碼運行101次。（「document.get [...]」部分） – JasonWoof

@JasonWoof您說得對 - 應該從1開始，因爲0與click之前的位置相同 – Dennis

使用var語句來獲得封閉的工作權利。檢查>=。

（i是一個非常糟糕的變量名，你可能在其他地方使用它，並在全球範圍內重新設置。）

有是與X，Y，P和G另一個問題。但我不確定這些值用於什麼...我想你可能需要另外兩個變量，但我不確定。

<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>

來源

2011-08-31 12:28:36 Hogan

'var i = 0;'不是一個好主意 –

爲什麼不，它是一個變量從0開始計數到100？ – Hogan

記住'var i = 0'只會在回調函數每運行100次時運行一次。這是關閉的一部分。 – Hogan

JavaScript的滾動DIV

回答

相關問題