1

ブラウザで要素の現在の場所をどのように見つけることができるのだろうかと思っていました。jQueryスライダーを作成しようとしています。以前にマージンをアニメーション化してスライダーを作成しました。しかし、この場合は少し複雑です。2つのナビゲーションがあります。あるページから別のページにスライドするもの。1ページに4つのサムネイルがあります。また、下部のナビゲーションを使用すると、1つのサムネイルのみをスライドできます。下の画像を参照してください。

スライダー

マージンをアニメートすることで、この効果を以前に得ることができました。しかし、それはあまり効率的ではなく、多くのバグがあります。だから、もう一度一からやりたいと思いました。

今私がやろうとしていることは：

  1. 矢印ナビゲーションを使用して、マージンをアニメーション化し、次のスライドに進みます。
  2. ページネーションを使用して、サムネイルの現在の位置を確認し、記事の幅+ガターに等しいマージンをアニメーション化します。

jQueryオフセットを使用してそれを行うことは可能ですか？正しい方法を教えてください。サンプルコードの例は高く評価されます。

前もって感謝します。

編集：

私は実際にスライダーを完成させました。それは私が望んでいたように完全に機能しています。この質問には数日でお答えします。また、サイトが完成したら、リンクを共有して、他の人が実際に動作していることを確認できるようにします。:)

4

2 に答える 2

0

jQuery の offset メソッドは、ドキュメントに対する要素の位置を返します。ここで必要なのは正確ではありません。

スライダーまたはカルーセルの背後にある基本的な考え方は次のとおりです。

  1. 「ビューポート」要素 (通常はdiv) があり、その中にあるすべてのものの位置決めアンカーとして機能します。position:relativeCSS宣言を設定することで、アンカーとして機能させます。またoverflow:hidden、境界を超えるコンテンツを非表示にするように設定します。これを と呼びます#container。
  2. 内では、要素#container内にアイテムのリストがあります。has CSS 宣言ul。これを と呼びます。ulposition:absolute#content
  3. CSS プロパティ#contentをアニメーション化して移動します。left

あなたは基本的な概念を理解しており、使用margin-leftすることは適切な解決策です。しかし、left代わりにプロパティをアニメーション化することで、可能であれば CSS3 トランジションとトランスフォームをスワップするなど、いくつかの気の利いたことを行うことができます。これらにより、ハードウェア アクセラレーションによるバターのように滑らかなアニメーションが得られます。

サポートされている CSS3 アニメーションを自動的に使用する素晴らしいプラグインは、jQuery Animate Enhanced です: http://playground.benbarnett.net/jquery-animate-enhanced/。いくつかの小さな調整を加えて、これまでとほとんど同じようにコードを記述し、可能な場合はハードウェア アクセラレーションによるグラフィックスを取得できます。

于 2012-05-04T01:27:45.037 に答える
0

margin現在のマージンを追跡する変数を作成しました。矢印ナビゲーションが押されると、余白を で増減しmargin * 4ます。下部のナビゲーションが押された場合、クリックされたページャーを返す変数から int を取得します。4番目の場合はクリックします。4 * デフォルトのマージンを掛けるだけです。

誰かが興味を持っている場合は、コード サンプルを共有できます。

于 2012-05-11T02:28:32.740 に答える