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>
?
这上面都有注释，方便读者理解。
?
?
?
下面的文件是这个案例的演示，方便读者朋友们理解这个案例。
?
