5


2

私はjQueryを使用して、GIFを使用してかなり単純なアニメーションを作成する必要をなくしたいと考えています。

私が欲しいのは4つのステージを持つイメージです。 1)何も表示されていない2)画像の最初の部分3)画像の2番目の部分4)画像の3番目の部分 - 最初からやり直す

アニメーションを作成するには、画像ステージを作成してから、「現在の画像を次の画像に置き換える」手法をjQueryで使用する必要があると思いました。 これはコールバックを使えばかなり簡単になります。

次の部分は、前のアニメーションのロードが完了した後に、このアニメーションをいくつかの場所に表示させることです。 もう一度言いますが、コールバックを使えば簡単でしょう。

私はこれについていくつか考えました。 GIFだけを使用しないのはばかげていますか それともこれはjQueryで行うことができますか?

6 Answer


3


これははるかに簡単で、連鎖能力を維持します。

  • JQuery:*

$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

マークアップ:

#slideshow {
    position:absolute; //or whatever you need
    display:block;
    top:0px;
    left:0px;
}
#slideshow img {
    position:absolute;
    opacity:0;
}

プラグイン:

(function( $ ){
    $.fn.rotator = function(delay, child){
        //set curImage val
        var currImg = 0;
        var currIt = true;
        //set array of images
        var ss = $('#slideshow').children(child);
        var ssize = ss.size();
        setInterval(function() {
            if(currIt){
                $(ss[currImg]).css('opacity','1');
                currIt = !currIt;
            }else if (!currIt){
                $(ss[currImg]).css('opacity','0');
                $(ss[currImg+1]).css('opacity','1');
                currIt = !currIt;
                currImg++;
            }
            //reset
            if(currImg >= ssize){
                currImg = 0;
                $(ss[currImg]).css('opacity','1');
            }
        }, delay);
        return this;
    };
})(jQuery);


1



0


最初にあなたが必要とする画像の一部を置くいくつかのdivの背景を使用することができます

http://www.codertools.com/css_help_guide/css_background-position.aspx[css_background-position]

次に、必要なアニメーションの種類に応じて表示する必要があるので、divを表示する必要があります。


0


アニメーションGIFを使用してください - これが彼らのために作られたものです。 JQueryを使ってソリューションをまとめることは可能だと確信していますが、追加の開発時間と複雑さの面でコストがかかります。

さらに、カスタマイズされたJQuery / CSSソリューションを使用することで、アニメーションをその上のページに密接に結合することを決定していることを認識しておく必要があります。 誰かが別のページにアニメーションを含めることを望む場合はどうなりますか? 彼らは単一のGIFファイルの代わりにたくさんのコードをコピーしなければならないでしょう。 誰かがそれを電子メールまたはパワーポイントのプレゼンテーションに含めたいとしたらどうでしょうか。 できない…


0


それが不変でイベント主導型ではない場合は、GIFを使用することをお勧めします。

ただし、アニメーションがページ上で発生した何かに反応している場合、またはすべてが読み込まれた後にアニメーションを開始するだけの場合は、jqueryを使用するのがおそらくでしょう。

画像を変更するには、画像のソース(または単一の画像を使用している場合は位置のオフセット)を変更するだけです。 画像間の変更を遅らせるためにjQueryの [一時停止オプション]をご覧ください。

テストされていない例(上記のリンクにあるSimonの回答から導き出されたもの):

関数chg1(){$( '#myimage')。attr( 'src'、 '');関数chg2(){$( '#myimage')。attr( 'src'、 'image1src.jpg');関数chg3(){$( '#myimage')。attr( 'src'、 'image2src.jpg');関数chg4(){$( '#myimage')。attr( 'src'、 'image3src.jpg'); }

関数StartAnimation(){setTimeout(chg1、2000); // 2秒後に空白になるsetTimeout(chg2、4000); // 4秒後のimg 1 setTimeout(chg3、6000); // 6秒後にimg 2 setTimeout(chg4、8000); // 8秒後のimg 3 setTimeout(StartAnimation、8000); // 8秒後に再開します}

StartAnimation(); //始めて


0


4つの画像を1つのスプライト(4つの画像すべてを含む1つの実際のグラフィック)にまとめることは可能でしょうか。 パフォーマンスの観点からは、クライアントのブラウザは、4つの画像それぞれに対して4つのリクエストを行うのではなく、1つの画像をダウンロードするだけで済みます。

アニメーションの作成は、Damovisaが上記で提案した手法を使用するのと同じくらい簡単です。ブロック要素を使用し、この単一画像を背景として設定し、要素のサイズを単一画像の1つの「タイル」のサイズに設定するだけです。そして、background-position cssプロパティを変更します。 これについては完全にはわかりませんが(間違っている場合は修正してください)、実際には4つの異なる画像を入れ替えるのではなく、背景画像を移動するほうが安価な操作のようです。

移植性と再利用性に関しては、jQueryプラグインを作成していくつかの場所で使用することができます。