2

私は水平方向にスクロールする Web サイトを構築しており、jquery serialscroll を使用してナビゲートしています。ページ上のキーボードの矢印キー (左右) とボタンをバインドして、div タグを使用して次の要素にスクロールします。効果は静かにうまく機能しますが、別のスクリプトで現在の要素/divを選択/呼び出す方法があるかどうか疑問に思っていましたか?

基本的に、上/下矢印をバインドして、最初に押してdivを下に展開し、その後(おそらくシリアルスクロールを再度使用して)このdivを上下にスクロールします。

誰かがこれで私を助けてくれれば、本当に感謝しています。おそらく、serialscroll または scrollto が使用するのに最適なプラグインであり、代替手段を歓迎します。

私は最初のサイトで作業しているため、おそらく多くの質問をすることになると思いますが、ご容赦ください。私の jscript に関する知識は基本的なものですが、習得はとても早いです。前もって感謝します。

コードサンプル:

$('#maincontent').serialScroll({
    items:'#slide',
    prev:'.leftArrow',
    next:'.rightArrow',
    offset:-220,
    start:0,
    duration:500,
    force:false,
    stop:true,
    constant:false,
    lock:false,
    cycle:false,
    easing:'easeOutQuart', 
    jump: true 

});

コードを変更することで、質問に答えることができたという更新だけです。

var $nav = $('#slideshow li');


$('#maincontent').serialScroll({
    items:'li',
    prev:'.leftArrow, div.logo#logo',
    next:'.rightArrow',
    offset:-220, //when scrolling to photo, stop 230 before reaching it (from the left)
    start:0, //as we are centering it, start at the 2nd
    duration:500,
    force:false,
    stop:true,
    constant:false,
    lock:false,
    cycle:false, //don't pull back once you reach the end
    easing:'easeOutQuart', //use this easing equation for a funny effect
    jump: true, //click on the images to scroll to them
    navigation:$nav,
    onBefore:function(e,el,$p,$i,pos){
    $nav.removeClass('newclass');
    $nav.eq(pos).addClass('newclass')},

});

これにより、現在の要素に新しいクラスを追加でき、それに応じて jscript を使用して変更できます。

4

3 に答える 3

1

上記のコメントに更新を追加して、クラスを追加し、現在の要素を選択して操作できるようにしました。

于 2012-04-16T16:13:48.867 に答える
0

コードが見えないのではっきりとは言えません。私はこれまでserialscrollを試したことがありませんが、あなたが説明したように、現在のdivを含むようにグローバル変数を設定するだけです。次に、を介してオブジェクトの高さを取得し、オブジェクトouterHeightが展開されているかどうかを確認します。

フィドルを追加して、多分私はもう少し助けることができます。

于 2012-04-15T19:41:27.317 に答える
0 
    onBefore: function (e, elem, $pane, $items, pos) {
     $('.item').removeClass('active');
     $('.item').eq(pos).addClass('active');
     },
于 2013-06-26T13:47:41.340 に答える