0

jqueryを使用して一種のスライダーを実装しようとしています。ただし、この質問は、機能を実現するためのCSSに関するものです。

私のサイトのデザインは、幅960pxの中央の列を占めています。このレイアウト内には、「次へ」ボタンをクリックして右にスライドしたい中央の要素があります。同時に、同じクラスの別の要素が左からスライドして、空いたスペースを占有します。私が達成しようとしていることの図を描きました。代替テキストhttp://img714.imageshack.us/img714/692/61886077.png

この図では、赤いブロックはスライドインおよびスライドアウトしたい要素であり、jQueryを使用して効果を生成するために左に移動するdivによってグループ化されています

私は2つの主な質問があります：

  1. ブラウザのウィンドウ幅が変化する可能性があり、現在のアイテムではないすべての要素を画面外に配置する必要がある場合、正しいマージン値を取得するにはどうすればよいですか？

2.ユーザーがサイズを変更する場合、jQueryのresize（）イベントを使用して返された値に基づいてマージンを動的に変更できます。それとも、純粋なCSSを使用してそれを行うためのより良いより良い方法がありますか？

4

2 に答える 2

2

常に中央に配置されるように、margin: auto を持つ div を中央に作成します。あなたの（赤い）ボックスは常に同じサイズになると思いますか？このサイズの中央揃えの div と、overflow: hidden を使用します。次に、この div 内に他の 3 つの div を作成します。これらは、ブラウザー ウィンドウのサイズではなく、その固定 div サイズ内に移動されます。

何かのようなもの：

<body style="text-align: center">
    <div id="container" style="overflow: hidden; width: 960px; height: 600px; margin: auto; position: relative">
     <div id="slider" style="width: 9999px; position: absolute">
      <div id="first" style="width: 960px; float left;"></div>
      <div id="second" ...></div>
      <div id="third" ...></div>
     </div>
    </div>
</body>

そのため、コンテナ設定内のスライダー div を左に移動します: 960px × ボックスの数

于 2010-05-21T14:36:21.370 に答える
0

display: none;必要になるまで赤い箱だけにしてもらえませんか？

移動する必要がある場合は、ボックスを端に配置してからスライドさせることができます。

http://www.jsfiddle.net/Vsjay/

于 2010-05-21T19:47:55.873 に答える