1

私は3つのリンクを持っています。各リンクで個別の DIV を制御する必要があります (コンテナ DIV 内にあると思います)。したがって、DIV-1 があるページを開くと、DIV-2 または 3 のリンクをクリックすると、ビューがその DIV にスライドまたはスクロールします。

jQueryでこれはどのように可能ですか? scrollleft を試してみましたが、役に立ちませんでした。

前もって感謝します、

ストゥ

4

1 に答える 1

0

最初の Child-Cell のマージンで.animate()メソッドを使用します。

クラス「セル」は 200x200 のボックスで構成され、すべて左にフロートされます。ID "container" も 200x200 で、非表示のオーバーフローがあります。3 つのリンクを割り当てて、クラス「セル」を持つ最初の div の margin-left をアニメーション化できます。これにより、必要な量に応じて、3 つすべてが左または右に移動します。

Link1 -> 最初の Div マージン左 = 0;
Link2 -> 最初の Div マージン左 = -200;
Link3 -> 最初の Div マージン左 = - 400;

更新: コメント内のフォローアップの質問に応じて、次のコードが更新されました。

セルを別の div で囲みました。この div はコンテナ内にあります。最初のセルの左マージンを操作するのではなく、これらのセルが存在する div の左マージンを操作します。これを試してみてください - 私はそれを試してみましたが、望ましい結果が得られました.

<style type="text/css">
  div#container { width:200px;height:200px;overflow:hidden; }
  div.cells { width:600px;height:200px;}
  div.cell { float:left;width:200px;height:200px;margin:0;padding:0; }
  div.cell p {margin:0;padding:0;}
</style>

<ul>
  <li><a href="#" class="box-mover">Show Box 1</a></li>
  <li><a href="#" class="box-mover">Show Box 2</a></li>
  <li><a href="#" class="box-mover">Show Box 3</a></li>
</ul>

<div id="container">
  <div class="cells">
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 1</p>
    </div>
    <div class="cell" style="background:#cc0000;color:#ffffff;">
      <p>Cell 2</p>
    </div>
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 3</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){

    $("a.box-mover:eq(0)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "0px"}, "slow");
    });
    $("a.box-mover:eq(1)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-200px"}, "slow");
    });
    $("a.box-mover:eq(2)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-400px"}, "slow");
    });

  });
</script>
于 2009-06-22T18:51:29.553 に答える