jQuery向上间歇滚动代码

我在网上下了个别人的案例研究了下，有了自己的心得，在这里也写个类似的滚动代码，jQuery的，代码总共才有不到15行，很简洁的。

 

先说明下：这里我做的是问题的滚动，你只要理解了这些代码，html结构你怎么改都可以，样式的调整就全凭你的css功底了。

 

下面说下我的案例吧。

<ul>
    <li><a href="#">yuanjianhang1988@126.com</a></li>
    <li><a href="#">923356533@qq.com</a></li>
    <li><a href="#">yuanjianhang.iteye.com</a></li>
</ul>

 

说白了，就是一个ul，li的简单结构：

<ul>

    <li></li>

    ........

</ul>

 

下面是css样式代码：

ul {width:400px;height:50px;overflow:hidden;border:#960 solid 4px}
li {height:50px;text-indent:20px;line-height:50px}

 

上面的代码中：overflow：hidden这个属性很重要，它隐藏了多出来的部分，也就是说它限定了滚动区域的大小。

做这个案例，不一定非要用<ul><li></li></ul>这种结构，也可以换成div等其它的标签。

 

jQuery代码中我首先定义了两个变量：

     var $swap = $('ul');  //滚动区域
     var movetotop;  //滚动的变量

我找到页面中<ul>标签，定义了一个变量。又定义了一个movetotop变量，这个变量的内容为：

movetotop=setInterval(function() {  //定义一个滚动时间间隔的方法
                   var li_height = $swap.find('li').height();
                   $swap.find('li:first').animate({marginTop:-li_height + 'px'},600,function() {                                  $swap.find('li:first').css('marginTop',0).appendTo($swap);  //获取到li的高度，向上滚动一个高度，并且用回调函数把css样式调回到原始的初始状态 

 

这个是真个案例的核心，这个变量中，我首先调用了setInterval（）方法，这个是javascript中定时的方法，不熟悉的朋友可以查查相关资料。

让后我调用了jQuery中自定义动画的方法：.animate().

 

 

到这里能看懂的话基本上会了解了我这个案例。下面我给出完整的jQuery代码：

<script type="text/javascript">
$(function() {
     var $swap = $('ul');  //滚动区域
     var movetotop;  //滚动的变量
     $swap.hover(function() {
        clearInterval(movetotop);  //鼠标进入指定的区域停止动画
        },function() {
         movetotop=setInterval(function() {  //定义一个滚动时间间隔的方法
                   var li_height = $swap.find('li').height();
                   $swap.find('li:first').animate({marginTop:-li_height + 'px'},600,function() {                                  $swap.find('li:first').css('marginTop',0).appendTo($swap);  //获取到li的高度，向上滚动一个高度，并且用回调函数把css样式调回到原始的初始状态 
                                    });
                   },1000);  //滚动的时间间隔
        }).trigger('mouseleave');  //模拟鼠标离开时的时间，让此动画一开始就执行。
     });
</script>

 

这上面都有注释，方便读者理解。

 

 

 

下面的文件是这个案例的演示，方便读者朋友们理解这个案例。