0

これはおそらく非常に基本的な質問であり、私が jQuery に慣れていないため、これを知りません。

すべてのコンテンツが水平にレイアウトされた幅の広い Web サイトを持っています。下部にスクロール バーを使用する代わりに、どちらかの側にボタンを配置して、クリックするとサイト内で左右に移動できるようにしています。

ここにjQueryがあります：

$(".timeline_page a.flex-prev").click(function(){
$(".timeline_page_wrapper").scrollLeft(Math.max(0, $(".timeline_page_wrapper").scrollLeft() - 500));
});

$(".timeline_page a.flex-next").click(function(){
$(".timeline_page_wrapper").scrollLeft(Math.min(1200, $(".timeline_page_wrapper").scrollLeft() + 500));
});

ここまでは順調ですね。アニメ化したいのですが、やり方がわかりません。私がしようとするすべてが実行されない原因となります。

関連するメモとして、ボタンの状態を変更できるように、ユーザーが右側または左側の端にいることを知る方法はありますか?

編集：

わかりましたので、次のコードを取得し、アニメーション化することができました。しかし、特定のポイントに達した場合にクラスを追加または削除すると、何が間違っているのでしょうか?

$(".timeline_page a.flex-prev").click(function(){
$(".timeline_page_wrapper").animate({
    scrollLeft: Math.max(0, $(".timeline_page_wrapper").scrollLeft() - 500)}, 650);
});

$(".timeline_page a.flex-next").click(function(){
$(".timeline_page_wrapper").animate({
    scrollLeft: Math.min(4080, $(".timeline_page_wrapper").scrollLeft() + 500)}, 650);
});

if ($(".timeline_page_wrapper").scrollLeft() === 0 {
    $(".timeline_page a.flex-prev").addClass("flex-disabled");
} else {
    $(".timeline_page a.flex-prev").removeClass("flex-disabled");
}
);

});
4

2 に答える 2

0

私は以前にそれを使用しましたが、うまくいきます！ここでデモとチュートリアルを参照してください。

于 2012-10-05T17:18:11.417 に答える
0

JQuery Animate() メソッドを見てください。ビュー/ページ幅の増分で位置をアニメーション化してみてください。 http://api.jquery.com/animate/

タイムライン_ページ_ラッパーの scrollLeft() をチェックし、それをコンテンツ全体の幅と比較することで、ユーザーが最後にいることを知ることができます。Scrollleft は、表示される残りの量も提供する必要があります。ページの最後まで来たかどうかは、ちょっとした計算でわかります。 http://api.jquery.com/scrollLeft/

お役に立てれば

于 2012-10-05T18:07:41.490 に答える