2

setImg(); のときに乱数を生成するスクリプトがあります。ランダムに選択された画像が表示されます。

<img src="" id="imgRand" alt="">


      function setImg(){
          var numRand = Math.floor(Math.random()*(6 - 1 + 1)) + 1;
          document.getElementById("imgRand").src = "images/"+numRand+".jpg";

      }

これはすべて正常に機能しますが、画像が変更されると「表示」されます。あるものから別のものへとフェードさせる方法があるかどうか疑問に思っていましたか？オンラインで見つけたものはすべて、個々の画像にスタイルを設定することについて話していますが、この乱数スクリプトを使用して画像をソースしているため、これらのソリューションを適応させる方法が思いつきません.

どんな助けでも大歓迎です、ありがとう！

4

3 に答える 3

3

CSS3 トランジションを使用した例を紹介します。特定のケースに合わせて調整および改善できます。

書き起こし終了コールバックの実装はベンダーに依存するため、私の具体的な例は、記述されているように Webkit でのみ機能します。これは、正しいベンダー イベント ハンドラー名を使用することで修正できます。

/* Fades an element to given opacity */
var fade = function(opacity, fn) {
    this.addEventListener("webkitTransitionEnd", function end() {
        this.removeEventListener("webkitTransitionEnd", end);
        fn && fn.call(this);
    }, false);
    this.style.opacity = opacity;
};


/* Preloads an image */
var load = function(src, fn) {
    var self = this, $img = new Image();
    $img.onload = function() {
        fn && fn.call(self);
    };
    $img.src = src;
};


/* Steps:
 *   1. Fades out current image.
 *   2. Preloads next image.
 *   3. When loading of next image is complete, sets next image.
 *   4. Fades in.
 */
var $img = document.getElementById("imgRand");
/* Fades out */
fade.call($img, 0, function() {
    /* Get random dimensions */
    var height = Math.ceil(Math.random() * 100) + 100;
    var width = Math.ceil(Math.random() * 200) + 100;
    var src = "http://placehold.it/" + width + "x" + height;
    /* Preloading */
    load.call(this, src, function() {
        $img.setAttribute("src", src);
        /* Fades in */
        fade.call($img, 1);
    });
});

ここで見ることができます。

img要素の-webkit-transition-durationstyle プロパティが に設定されてい1sます。

この中で最も複雑で見過ごされている部分は、画像のプリロードです。使用するすべての画像をプリロードしないと、アニメーションが滑らかにならないためです。しかし同時に、画像がいつ読み込まれたかを検出するのは簡単な作業ではありません。私が使用している方法は、ブラウザのキャッシュ内の画像に対して失敗する可能性が最も高い単純なものです。それについては詳しく説明しませんが、SO で検索できます。

免責事項：遅すぎます。そのため、ここにコードをダンプして、後で使用します。疑問があれば。

于 2013-01-05T00:34:55.190 に答える
0

これは長すぎてコメントできませんでしたが、正しい方向に導くことができれば幸いです。

したがって、の src を の呼び出しごとに置き換えるため、クロスフェードしようとしている 2 つの画像は同時に DOM に存在しません。おそらく、CSS を使用して互いの上に積み重ねられた 2 つの別個のイメージ タグが必要になるでしょう。imgRandsetImg

次にsrc、一番上の画像 (フェードインしたい画像) を設定し、この画像を CSS で非表示にする必要がありますsrc。

opacity次に、画像の を 100 になるまで設定して、一番上の画像を段階的にフェードインします...

ばかげた説明で申し訳ありませんが、jQuery を使用できる場合は、おそらくはるかに簡単です。私は行って例を探し出し、これを更新します。

更新: jQuery を使用している場合、これはスクリプトがどのように見えるかの基本的な例です: http://jsfiddle.net/tracyfu/W9wMh/ストレート JS に限定されている場合は、ここにある他のソリューションのいくつかが優れている可能性があります。

于 2013-01-05T00:04:58.243 に答える
0

これは、jQuery などのライブラリを使用して最も簡単に実行できますが、jsFiddle の例を次に示します。絶対配置を使用して、2 つの画像を重ねて配置し、そのうちの 1 つをopacity0 にします。次に、2 つの画像を切り替えて、ヘルパー関数を使用して 1 つをフェードイン、もう 1 つをフェードアウトします。

html は次のようになります。

<div id="imageHolder">
    <img id="imgRand0" src="http://placehold.it/100x100" />
    <img id="imgRand1" src="http://placehold.it/100x100" style="opacity:0;alpha(opacity:0);"/>
</div>

<button onclick="setImg()">New Image</button>​

CSS:

img {
    position:absolute;
    top:0;
    left:0;
}
#imageHolder {
    position:relative;
    height:100px;
}

そしてJavaScript（このチュートリアルの追加機能を使用します）：

var counter = 0;
function setImg(){
    var numRand = Math.floor(Math.random()*6) + 1;
    //document.getElementById("imgRand").src = "images/"+numRand+".jpg";

    counter = (counter + 1) % 2;

    document.getElementById("imgRand" + counter).src = "http://placehold.it/100&text=" + numRand;
    fade('imgRand0');
    fade('imgRand1');
}
于 2013-01-05T00:23:50.457 に答える