3

「 サイトへようこそ 」というサインのある小さなアニメーションの飛行機があり、左の画面から右にループして移動したい。出てきて、消えてください。今、これがJSでできることは知っていますが、わかりません。JS で 1 つの画像を移動するのは非常に難しいですか?

4

3 に答える 3

7

あなたの助けを借りて、.animate()ほとんど何でもアニメートすることができます

.animate（プロパティ[、期間] [、イージング] [、完全]）

  • プロパティ
    タイプ： PlainObject
    アニメーションが移動するCSSプロパティと値のオブジェクト。

  • 期間 （デフォルト 400:)
    タイプ： 数値 または 文字列
    アニメーションの実行時間を決定する文字列または数値。

  • イージング （デフォルト swing:)
    タイプ： 文字
    列遷移に使用するイージング関数を示す文字列。

  • complete
    タイプ： Function（）
    アニメーションが完了したときに呼び出す関数で、一致した要素ごとに1回呼び出されます。

ループの場合、実際のアニメーション部分を名前付き関数にラップし、これをcompleteコールバックとして渡します。これで、アニメーションは終了すると再開されます。

$(function() {
    var img = $("#plane"),
        width = img.get(0).width,
        screenWidth = $(window).width(),
        duration = 5000;

    function animatePlane() {
        img.css("left", -width).animate({
            "left": screenWidth
        }, duration, animatePlane);
    }

    animatePlane();
});
body { overflow: hidden }
#plane { position: absolute; left: -1000px; width: 50% /* <- not relevant for the animation */ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="plane" src="https://cdn.pixabay.com/photo/2018/09/13/10/18/aircraft-3674305_640.png" />
<!-- source: https://pixabay.com/de/flugzeuge-propeller-aircraft-alt-3674305/ -->

于 2012-10-03T16:33:08.073 に答える
3

何でもアニメートできます。私のコードは、画面全体で div (画像または任意のコンテンツを含む) をアニメーション化します。

HTML:

<div id="animate">Sample</div>

CSS:

#animate {
    position: relative;
    border; 1px solid green;
    background: yellow;
    width: 100px;
    height: 100px;
}

JavaScript/jQuery コード:

$(document).ready(function(e) {
    var width = "+=" + $(document).width();
    $("#animate").animate({
    left: width
  }, 5000, function() {
    // Animation complete.
  });
});

ここでJSFiddle を作業します。

div には何でも入れることができます。CSS の唯一の重要な部分は、「position: relative;」です。属性。「#animate」を ID からクラスに変更して、複数のオブジェクトを画面上でアニメーション化することができます。jQuery は非常に用途が広いです。

アニメーションを右から左に再びロールバックする場合は、コードを次のように変更します。

$(document).ready(function(e) {
    var width = $(document).width();

    function goRight() {
        $("#animate").animate({
        left: width
      }, 5000, function() {
         setTimeout(goLeft, 50);
      });
    }
    function goLeft() {
        $("#animate").animate({
        left: 0
      }, 5000, function() {
         setTimeout(goRight, 50);
      });
    }

    setTimeout(goRight, 50);
});

そのためのjsFiddleの作業はこちら

画像が右に回転して永久に消えるようにするには、次の操作を行います。

$(document).ready(function(e) {
    var width = "+=" + $(document).width();
    $("#animate").animate({
    left: width
  }, 5000, function() {
    $("#animate").css("display", "none");
  });
});

そのためのjsFiddleの作業はこちら

于 2012-10-03T16:37:30.140 に答える