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

回答

相关问题