リストを含む div コンテナーがあり、このリストの 1 つの項目のみが一度に表示され、残りは非表示になっています (コンテナーにはオーバーフローがあります: 非表示)。
正確なリンクをクリックした後、jQueryに要求されたアイテムを表示させたい:
何か案は？scrollTo は役に立ちますか? このプラグを試してみましたが、うまくいきません。私はむしろiframeを使用したくありません。
29223 次
5 に答える
13
ScrollTo は役に立ちますが、スクロールは絶対に必要ですか? slideUp()を使用する方がさらに良いと思いますslideDown()
スライド アイテムにクラスと ID を与えるために、HTML を少し変更しました。
ライブデモ: http://jsfiddle.net/ztFWv/1/
<div id="slider">
<ul>
<li id="one" class="slideItem">
<h1>Header #1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
</li>
<li id="two" class="slideItem">
<h1>Header #2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
</li>
<li id="three" class="slideItem">
<h1>Header #3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
</li>
</div>
<a href="javascript:void(0);" class="one">Scroll to #1</a>
<a href="javascript:void(0);" class="two">Scroll to #2</a>
<a href="javascript:void(0);" class="three">Scroll to #3</a>
JS
$('a').click(function(){
var linkClass=$(this).attr('class');
$('.slideItem:visible').slideUp('fast',function(){
$('#' + linkClass).slideDown('fast');
});
});
アップデート
スクロールが必要な場合:)
ここにサンプルがあります: http://jsfiddle.net/ztFWv/3/
scrollTo JS ファイルをインクルードし、この方法でコマンドを使用します。
$('a').click(function(){
$('#slider').scrollTo( $('#' + $(this).attr('class')), 800 );
});
于 2011-02-04T12:44:44.693 に答える
3
これを行うための私のお気に入りの方法はtabindex="0"、タグに属性を追加してからfocus()、ブラウザにスクロールさせて表示する要素を呼び出すことです。
それはあなたに多くのコントロールを与えませんが、それはネイティブのスクロールと非常にスムーズです。
于 2011-02-04T14:16:14.617 に答える
0
これらを参照してください：
于 2011-02-04T12:38:54.587 に答える
0
今日はスクロールなどで数時間遊んでいて、ここで求められていたのと同じように、スクロールバーなしでスクロールするためのきちんとしたフレームワークを思いついた。一度に「ページ」または特定の要素（DIVなど）に垂直スクロールします。また、一度に1ページずつ、または特定の要素（SPANなど）への水平スクロールも実行します。
このフィドルで実際に見てください
HTMLの例は次のとおりです。
<p>
<h1>Vertical scrolling</h1>
<button class="shift up" value="updown" >^</button>
<button class="shift vertical" value="updown Av">A</button> <button class="shift vertical" value="updown Bv">B</button>
<div id="updown">
<div id="Av"> AAAAAAA text AAAAAAA </div>
<div id="Bv"> BBBBBBB text BBBBBBB </div>
<div id="Cv"> CCCCCCC text CCCCCCC </div>
<div id="Mv"> MMMMMMM text MMMMMMM </div>
</div>
<button class="shift down" value="updown" >v</button>
<button class="shift vertical" value="updown Cv">C</button> <button class="shift vertical" value="updown Mv">M</button>
</p>
<p>
<h1>Horizontal scrolling</h1>
<button class="shift right" value="leftright" >></button>
<button class="shift horizontal" value="leftright Ah">A</button> <button class="shift horizontal" value="leftright Bh">B</button>
<div id="leftright">
<span id="Ah"> AAAAAAA text AAAAAAA </span>
<span id="Bh"> BBBBBBB text BBBBBBB </span>
<span id="Ch"> CCCCCCC text CCCCCCC </span>
<span id="Mh"> MMMMMMM text MMMMMMM </span>
</div>
<button class="shift left" value="leftright"><</button>
<button class="shift horizontal" value="leftright Ch">C</button> <button class="shift horizontal" value="leftright Mh">M</button>
</p>
CSSは次のとおりです。
#updown, #leftright{
position: relative;
overflow: hidden;
line-height: 1.5em;
height: 1.5em;
width: 20em;
border: 2px solid #000;
}
#updown div {
position: absolute;
height: 1.5em;
width: 20em;
margin: 0;
padding: 0;
border: 0;
}
#leftright span {
position: absolute;
display: inline;
float: left;
height: 1.5em;
width: 20em;
margin: 0;
padding: 0;
border: 0;
}
javascriptは次のとおりです。
// See it in action at http://jsfiddle.net/Q7FFN/
$('#updown div').each(function(i){ // position the "divs"
var $this = $(this);
var amount = $this.parent().height();
$this.css({top: i * amount});
});
$('#leftright span').each(function(i){ // position the "spans"
var $this = $(this);
var amount = $this.parent().width();
$this.css({left: i * amount});
});
$('.shift').click(function(){
var $this = $(this);
var value = $this.attr('value');
var values = value.split(/ +/);
var items = '#' + values[0];
var item = (values.length == 2) ? '#' + values[1] : '';
var classes = $this.attr('class');
if (classes.match(/\bup\b/)) { // up - Use "match" instead of hasClass() for performance
var amount =$(items).height();
$(items).children().animate({top: '-=' + amount}, 'slow');
} else if (classes.match(/\bdown\b/)) { // down
var amount =$(items).height();
$(items).children().animate({top: '+=' + amount}, 'slow');
} else if (classes.match(/\bleft\b/)) { // left
var amount = $(items).width();
$(items).children().animate({left: '-=' + amount}, 'slow');
} else if (classes.match(/\bright\b/)) { // right
var amount = $(items).width();
$(items).children().animate({left: '+=' + amount}, 'slow');
} else if (classes.match(/\bvertical\b/)) { // vertical
var amount = $(item).css('top');
console.log("amount=", amount);
$(items).children().animate({top: '-=' + amount}, 'slow');
} else if (classes.match(/\bhorizontal\b/)) { // horizontal
var amount = $(item).css('left');
$(items).children().animate({left: '-=' + amount}, 'slow');
} else {
return false;
}
});
于 2011-02-04T22:51:23.800 に答える
0
はい、scrollTo jQuery プラグインを使用します。
使い方はカンタンです。私はいくつかのプロジェクトでそれを自分で使用しました。
アニメーションの有無にかかわらず、TABS や div の非表示と表示など、他の方法があります。よりプロフェッショナルに見えるので、私はこの方法を好みます。
于 2011-02-04T12:36:29.043 に答える