0

私は次のことに役立つjQueryプラグインを探しています：

ヘッダーに使用したい画像のリストがありますが、それらはかなり大きく（特に高さ）、小さなヘッダーdivに合わせてサイズを変更したくありません。

私が欲しいのは 、画像がdivの下部（またはdivの上部にある画像の上部）から開始して上に移動し、画像全体が表示されるようにするプラグインです。完全に表示され（画像の下部、divの下部）、次の画像と「ブレンド」（不透明度の切り替えなど）して、すべての画像で連続ループを作成する必要があります。

私はいくつかのプラグインを調べましたが、私が探しているものを達成できるプラグインを見つけたことがありません（多分私は少し多くを求めています）が、私のJSはそれを自分で構築するのに十分ではありません。

ありがとう！

編集：私はalextegの投稿に基づいて別の方向に進むことにしました、すなわちこれ：

            $('#header_img img').hide();
            $('#header_img img').each(function(i) {
                $(this).show().animate({
                    opacity: 1.0,
                    marginTop: '-=' + ($(this).height() - $('#header_img').height())
                }, 5000, function() {
                    $(this).animate({
                        opacity: 0.0
                    }, 1000).hide();
                });
            });

今私が抱えている唯一の問題は、最初の画像がトリガーされ、それが終了すると2番目の画像がトリガーされますが、アニメーション全体が終了するまで待つのではなく、すぐに次の画像もトリガーすることです。

これで、アニメーションコールバックを使用してこれを実行できることがわかりましたが、これを、画像をループするために実行しているそれぞれと組み合わせる方法がわかりません。理想的にはループも継続するので（最後の画像の後に最初の画像など）、誰かが何か考えを持っているなら、それは大いにありがたいです！

4

2 に答える 2

2

Cycleプラグインはブレンドをうまく行うことができます。最初の画像をアニメーション化する場合は、cycle-pluginをアクティブ化するコールバックで.animate（）関数を使用できます。最初のアニメーションの最初の画像を除くすべてを非表示にしてから表示し、cycle-pluginをアクティブ化する必要がある場合があります。

サイクルプラグインの場合、次のような画像を配置する必要があります。

<div id="header"> 
    <img src="images/header_1.jpg" width="900" height="250" /> 
    <img src="images/header_2.jpg" width="900" height="250" /> 
    <img src="images/header_3.jpg" width="900" height="250" /> 
</div>

次に、次のようなことを行うことができます。

$(document).ready(function(){
  $('#header img').hide();
  $('#header').animate({
    opacity: 1.0,
    marginTop: '-=250',
  }, 5000, function() {
    $('#header').cycle({
      fx:   'fade',
      speed:    3000,
      timeout:  7000
    });
  });
});

次に、次のような初期CSSも必要です。

#header {
    height: 250px;
    overflow: hidden;
}

#header img:first-child {
    margin-top: 250px;
}

もちろん、必要に応じてすべての名前、サイズ、速度などを調整する必要があります。

于 2010-05-13T16:22:56.950 に答える
0

私はサイクルが大好きですが、これはヘッダーとしてはもっとエレガントかもしれないと思います：

Dev7のNivoスライダー http://nivo.dev7studios.com/

ただし、 alextegのCSSを使用すると、クリッピングも調べることができます

http://www.w3schools.com/CSS/pr_pos_clip.asp

于 2010-05-13T16:33:30.550 に答える