0

これは私のコードです:

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

画像が動かない 何が悪いの？

4

2 に答える 2

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

望ましい結果を得るために。

于 2013-06-04T11:57:36.367 に答える
1

img の位置を絶対として設定する必要があります。

#Parachute{position:absolute}

またはアニメートmargin-top、margin-left

http://jsfiddle.net/KyNDm/

于 2013-06-04T11:57:30.200 に答える