8

以下のようなdivを作りたいです。

<div id="upButton">&nbsp;</div>
<div id="divWithExcessiveContent" style="overflow: hidden; height: 20px;">
    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    ...
    content number 100<br/>
</div>
<div id="downButton">&nbsp;</div>

上記のコードに基づいて、#divWithExcessiveContentのコンテンツはおそらくまでしか表示されず"content number 20"、残りは非表示になります。をクリックする#downButtonと、 の内部がdiv下にスクロールし、以下のコンテンツが表示されます"content number 20"。

jQueryを使用してそれを行うにはどうすればよいですか?

4

2 に答える 2

3

2 つの jsFiddles を作成しました。これがあなたのアイテムリストでやりたいことであることを願っています

別のコンテナ div を導入し、高さ/マージンの上下を調整して次にスクロール/表示することで、このトリックを実行できます。

<div id="upButton">&nbsp;</div>
<div id="container" style="overflow: hidden;height: 40px;">
<div id="divWithExcessiveContent" >
    content number 1<br/>
    content number 2<br/>
    content number 3<br/>
    content number 4<br/>
    content number 5<br/>
    ...
    content number 100<br/>
</div>
</div>
<br>
<div id="downButton" style="border:solid 1px;width:50px;">Button</div>

Jクエリ:

var i = 0;
$('div#downButton').click( function() {
    i = i - 20;
   $('div#divWithExcessiveContent').css('margin-top', i + 'px');
  });

i) スクロールのような動作のデモ

http://jsfiddle.net/vendettamit/4xuV4/

ii) 次の要素のデモを表示する拡張可能な div

http://jsfiddle.net/vendettamit/kmHPk/

于 2013-06-26T15:57:30.233 に答える
0

おそらく、このリンクは役に立ちますか?

要素を特定の位置にスクロールできます。

$('#divWithExcessiveContent').scrollTo( {top:'-=100px', left:'+=100'}, 800 );

これは jQuery のプラグインであるため、jQuery に既にプラグインがあるかどうかを確認する必要があることに注意してください。

これがお役に立てば幸いです。

于 2013-06-26T15:18:58.613 に答える