1

jQueryを使用してHTML5でページを作成する必要があります。このページでは、すべての質問がテーブルの形式で表示されます。特定の質問をクリックすると、その答えはスライドして表示されます。その答えを閉じると、スライダーが戻り、質問が表示されます。

これはどのように可能ですか？値に使用する必要<div>がありますか、それともから取得する必要がありXMLますか？あなたの提案とチュートリアルでガイドしてください。

4

1 に答える 1

1

これを行う方法の基本的な例を次に示します。

デモjsBin

このHTML構造が必要です。

<div class="slider_container"> <!-- overflow:hidden; -->
<div class="slider">  <!-- position:absolute;width:loooot; -->

  <div class="box">
      <h2>Questions</h2>
      <ul class="goto">
        <li>Question 1</li>
        <li>Question 2</li>
        <li>Question 3</li>
        <li>Question 4</li>
      </ul>
  </div>
  <div class="box"><h2>ANSWER 1<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 2<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 3<span class="back">&lt; back</span></h2>box text...</div>
  <div class="box"><h2>ANSWER 4<span class="back">&lt; back</span></h2>box text...</div>

</div>
</div>

そして、この基本的なjQuery：

var galW = 600; // set here the 'slider container' width

$('ul.goto li').on('click',function(e){
  e.preventDefault();
  var thisIndex = $(this).index()+1;  
  $('.slider').stop(1).animate({left: -(galW*thisIndex)}, 1000);  
});

$('span.back').on('click',function(){
  $('.slider').stop(1).animate({left: 0}, 1000); 
});

ここで行うことは、クリックされた要素のインデックスNliを+1することです。
+1の原因は、すでに最初のボックス（質問を含む）を見ていますが、他のすべての.box要素は+1インデックス高くなります。

その数を取得したら、スライダーを「速度」（時間）1000でアニメーション化し、簡単な計算を行います。取得したインデックスNに「ビューポート」の幅を掛けます。

.slider戻るには、戻るをleft:0px（または単に「0」）位置にアニメートします。

私が使用した方法のいくつかを理解していない場合は、ここでそれらを見つけることができます：http: //api.jquery.com/

（次回は、あなたのコードを見ることができるように、質問をするための努力を示してください。ありがとう！ハッピーコーディング）

于 2012-05-09T12:02:41.370 に答える