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

你需要调整你的css...图像的位置应该设置absolute为你使用left和top：

#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();
});

为了得到想要的结果。

Answer 2

您需要将 img 的位置设置为绝对：

#Parachute{position:absolute}

或动画margin-top，margin-left

http://jsfiddle.net/KyNDm/