0

の中に画像がありdivます。ある種のタイマーを使用して、画像を内部のさまざまな位置に移動したいと思いますdiv。

HTMLの例：

<div id="Container" width="200" height="100"><img src="..."></div>
4

4 に答える 4

4

私はjQueryで何かを作り上げました。興味深いのは、topと をleft同時にアニメーション化することから始めたことです。いくつかの努力と三角法の後、x 要素と y 要素を分離すると、div 内で跳ね回るアニメーションがはるかに簡単になることに気付きました。

デモ: http://jsfiddle.net/jtbowden/DcgwR/

複数の要素を処理できるバージョンを次に示します。

デモ: http://jsfiddle.net/jtbowden/DcgwR/2/

コードの重要な部分は次のとおりです。

// Parameters
// img: jQuery element (not necessarily img)
// speed: in px/millisecond
// max: maximum distance to travel
// dir: 'left' or 'top'

function bounce(img, speed, max, dir) {
    speed += ((Math.random() * varSpeed) - (varSpeed / 2));
    speed = speed < minSpeed ? minSpeed : (speed > maxSpeed ? maxSpeed : speed)
    var time = max / speed;
    var position = img.position();
    var target = (position[dir] < 2) ? max : 0;

    var style = {
        queue: false
    };
    style[dir] = target;
    img.animate(style, {
        duration: time,
        queue: false,
        easing: "linear",
        complete: function() {
            bounce(img, time, max, dir);
        }
    });
}

maxSpeed、minSpeed、varSpeedはグローバルに (px/ms で) 定義されvarSpeed、バウンスごとに速度がどの程度変化するかを示します。を 1 回、を1 回、2 回startBounce呼び出す別の関数があります。アニメーションはキューに入れられないため、独立してアニメーション化されます。bouncelefttop

于 2012-04-19T18:17:26.247 に答える
1

このようなもの：

<script>
function moveit()
{
  var animatedImg = document.getElementById( "animate" );
  var top = animatedImg.offsetTop;
  var left = animatedImg.offsetLeft;
  top++;
  left++;
  if ( top > 100 )
  {
    top = 0;
  }
  if ( left > 200 )
  {
    left = 0;
  }
  animatedImg.setAttribute( "style", "position: relative; top: " + top + "px; left: " + left + "px;" );
  setTimeout( moveIt, 1000 );
}
</script>
...
<body onload="moveIt()">
<div>
  <img src="imageSource" id="animate" />
</div>
于 2012-04-19T15:09:03.003 に答える
1

次の HTML があるとします。

<div id="container" style="width:500px;height:500px">
  <img src="foo.gif" width="50" height="50">
</div>

jQueryを使用すると、次のことができます。

<script>
  ;(function() {
    var img = $("#container img");
    img.css({ position: "absolute" });
    img.animate({ left: 50, top: 50 });
    img.animate({ left: 100, top: 100 });
    // and so on

    // or if you just want to position it without animation
    img.css({ left: 50, top: 50 });
    // some timeout or similar
    img.css({ left: 100, top: 100 });
    // and so on
  })();
于 2012-04-18T20:05:41.850 に答える
0

私たちにコードを書いてもらいたいだけではなく、答えを求めていると思います。

タイマー (lookup: setTimeout) を使用して正しい軌道に乗っています。その上で、位置を変更できます (CSS を使用。ルックアップ プロパティposition、left、rightおよびおそらくmargin、おそらくwidthおよびheight)。

私だったら、jQuery を使用します。その場合はanimate、検索する必要があり.offset()ます。

于 2012-04-19T14:47:27.163 に答える