当前位置: 代码迷 >> Web前端 >> jQuery向下间歇滚动代码
  详细解决方案

jQuery向下间歇滚动代码

热度:59   发布时间:2012-11-05 09:35:12.0
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>

?

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

?

?

?

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

?

  相关解决方案