randomaly移動圖像的DIV

Question

這是我的代碼裏面：

<style type="text/css"> 
    #box 
    { 
     width: 400px; 
     height: 400px; 
     border: 1px solid; 
     cursor: none; 
    } 
     #Parachute 
    { 
    width: 25px; 
    height: 25px; 
    cursor: none; 
    position: absolute; 
    } 
    </style> 
    <script type="text/javascript"> 
     $("#StartGame").click(function() { 
      animateDiv(); 


     }); 

     function makeNewPosition() { 

      // Get viewport dimensions (remove the dimension of the div) 
      var h = $("#box").height() - 25; 
      var w = $("#box").width() - 25; 

      var nh = Math.floor(Math.random() * h); 
      var nw = Math.floor(Math.random() * w); 

      return [nh, nw]; 

     } 

     function animateDiv() { 
      var newq = makeNewPosition(); 
      $('#Parachute').animate({ top: newq[0], left: newq[1] }, function() { 
       animateDiv(); 
      }); 

     }; 

    <script> 
    <centre> 
    <div id="box"> 
     <img id="Parachute" src="Parachute.gif" width="25px" height="25px" /> 
    </div> 
    <centre> 
    <input type="button" id="StartGame" value="Start Game" /> 

圖像不動我到底做錯了什麼？

Answer 1

您需要設置絕對IMG的位置：

#Parachute{position:absolute} 

或者動畫margin-top，margin-left

http://jsfiddle.net/KyNDm/

Answer 2

您需要調整您的CSS ... 圖像的位置應該設置爲absolute，因爲您在使用左側和頂部：

#Parachute 
{ 
    width: 400px; 
    height: 400px; 
    border: 1px solid; 
    cursor: none; 
    position: absolute; 
} 

不改變你的CSS你也可以改變JS來：

$('#Parachute').animate({ 'margin-top': newq[0], 'margin-left': newq[1] }, function() { 
    animateDiv(); 
}); 

，以獲得期望的結果。