我想顯示圖像從右上角移動在簡單的HTML

Question

到左下角的onmouseover（）我調用此函數

function move_arrow() { 

     document.getElementById('arrow1').style.display = "block"; 
     j = 100; 
     for (var i = 1000; i > 260; i--) { 
      document.getElementById('arrow1').style.left = i + 'px'; 
      document.getElementById('arrow1').style.top = j + 'px'; 
      if (j < 440) { 
       j = j + .5; 
      } 
     //alert();  

     } 
    } 

隨着警報的顯示圖像移動到需要的位置，否則它不是。我知道警告它有足夠的時間來執行該功能。 對於這個簡單的html和javascript，適用於所有瀏覽器的解決方案是什麼？

Answer 1

您可以使用的setInterval例如：

function move_arrow() { 
    document.getElementById('arrow1').style.display = "block"; 
    j = 100; 
    i = 1000; 
    var intervalId = setInterval(
     function() { 
      i--; 
      document.getElementById('arrow1').style.left = i + 'px'; 
      document.getElementById('arrow1').style.top = j + 'px'; 
      if (j < 440) { 
       j = j + .5; 
      } 

      if (i < 240) 
       clearInterval(intervalId); //switch off setInterval 
     }, 
     10 //execute this function every 10ms 
    ); 
}