0

私はここでチュートリアルに従っています： http ：//tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/

また、イージングを使用して、単一のWebページ上の別のセクション/divからスクロールする方法を示します。

コードは次のとおりです。

<script type="text/javascript"       
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>
<script type="text/javascript">
         $(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000);
                event.preventDefault();
            });
        });
  </script>

私の質問は、このコードを正しく理解していますか？

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>

これらは単なるjavascriptライブラリライブラリです。

 $(function() {
            $('ul.nav a').bind('click',function(event){

これは、クリックしてナビゲートするリスト関数（？）を持つ新しいjscript関数を作成しています。

var $anchor = $(this);

次に、クリックしているリストの単なるインスタンスである変数を作成します。

    $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000);
                event.preventDefault();

この部分についてはよくわかりません。.stop.animateが正確に何をしているのかわかりません。左に1000ピクセルになることはわかっていますが、プロセスがわかりません。

これを片付けることができる人に感謝します。

4

1 に答える 1

2

Stop（）は、他のアニメーションを実行している場合、それらを停止してからそのアニメーションを実行することを意味します。

1000ミリ秒または1秒の間にアニメーション化されます。

また、scrollLeft関数を使用して水平方向にスクロールし、デフォルトのイベントを防ぎます。つまり、コンテンツにすぐに移動するのではなく、アンカー属性を参照（つまり、コンテンツ1、2、または3）として使用して、水平方向にスクロールします（イベント）。 PreventDefault）

すべてのdivに4000pxの幅を継承する「.content」のクラスがあることに注意してください。

scrollLeft: $($anchor.attr('href')).offset().left

.offset（）。leftは、要素の左側の位置をピクセル単位で返します。

$（$ anchor.attr（'href'））は、セクション＃1、セクション＃2、またはセクション＃3を参照します。これは、これらがCSSプロパティで宣言されたhref属性であるためです。

したがって、そのコード行は、クリックした数に応じて、ピクセル数Xだけ左にスクロールします。

于 2013-02-11T17:14:20.960 に答える