0

我在这里学习教程： http ://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/

它展示了如何使用缓动从单个网页上的另一个部分/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），而不是立即移动到内容（ event.防止默认）

请注意，每个 div 的 '.content' 类如何继承 4000 像素的宽度。

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

.offset().left返回元素的左侧位置，以像素为单位

$($anchor.attr('href'))指的是 section#1 ， section#2 或 section #3，因为这些是 CSS 属性中声明的 href 属性

所以那行代码所做的就是向左滚动 X 个像素，具体取决于您单击的数字

于 2013-02-11T17:14:20.960 回答