1

jQuery Cycle Pluginを使用しています。

これらは、プラグインが提供するオプションです。http://jquery.malsup.com/cycle/options.html

私は5つの異なるスライドを持っています。しかし、各スライドにはスライド内に 2 ～ 3 つの画像があり、スライド内の異なる位置でアニメーション化する必要があります。どうすればこれを達成できますか? または、これを可能にする別の jQuery プラグインはありますか?

例えば。 車、雲、太陽があるスライドが 1 つあります。したがって、ユーザーがこのスライドにカーソルを合わせるか到達したときです。車が中央にアニメーション化され、次に雲と太陽がアニメーション化され、車がアニメーション化された後に配置されます。

ここに画像の説明を入力

4

3 に答える 3

2

視差スライダーが必要です。ここで例を見ることができます。

于 2012-08-14T16:31:05.723 に答える
1

Parallax は潜在的な解決策になる可能性がありますが、Cycle が提供するオプションをもっと検討したいと思います。

この例を見てみましょう: http://jquery.malsup.com/cycle/int2.html

一番下に向かって、スライドのコールバックの前後に言及しています。したがって、理論的には、すべてをアニメーション化する関数を呼び出して、次のスライドが表示されたら、次のスライドの次のアニメーションを呼び出すことができます (存在する場合)。

スライダーがタイマー上にある場合、これは面倒です。それを覚えておいてください。

于 2012-08-14T17:25:02.510 に答える
-2

まあ、あなたはいくつかのことをすることができます。マウスを画像の上に置くと、それ自体がアニメーション化される gif に変わるようにすることができます。

.background:hover {
background-image: url('<filepath>/animate.gif');
}

または、ボタンがクリックされたとき、またはマウスがホバーしたとき (私の意見では少しトリッキーです)、個々の要素 (おそらく z-index を介して上に重ねられた個々の画像) がアニメーション化してスライドする jQuery イベントを実行できます。以上。

jQuery プラグインを使用している場合は、最初のオプションをお勧めします。

于 2012-08-14T16:37:08.633 に答える