jQuery向上间歇滚动代码[转载]

admin 发表于 [Javascript] 分类,标签: jQuery
0

我在网上下了个别人的案例研究了下,有了自己的心得,在这里也写个类似的滚动代码,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.javaeye.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>

 

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

发表我的评论