我在网上下了个别人的案例研究了下,有了自己的心得,在这里也写个类似的滚动代码,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>
?
这上面都有注释,方便读者理解。
?
?
?
下面的文件是这个案例的演示,方便读者朋友们理解这个案例。
?