使用jQuery实现简单上下无缝滚动

转载于https://www.cnblogs.com/walkingp/archive/2011/03/21/1990821.html

这个效果最开始是在douban的关于页面上看到的，当然最新的这个关于页面已经不在了。

使用纯Javascript实现无缝滚动的其中一个思路是这样的：



设置层A高度大于层B，并且使其overflow为none，这样B就只有一部分能看到了，然后使用Javascript重新复制一份B放在B后，启动计时器，每隔一段时间就检查B的scrollTop是否等于A的scrollTop，否则将B的scrollTop自加1。这样就实现了B不断向上滚动的效果。

而使用jQuery的方式显得更加逻辑清晰，代码也更加简洁，以下是html：

<ul id="leftBox">
    <li><a href="http://news.163.com/11/0321/04/6VL4M54L00014JB5.html" title="">卡扎菲号召全国皆兵 向人民打开武器库</a></li>
    <li><a href="http://news.163.com/11/0321/04/6VL4M54L00014JB5.html" title="">利比亚首都遭空袭 政府军射防空炮反击</a></li>
    <li><a href="http://news.163.com/11/0321/02/6VKTCF2100014AED.html" title="">私家车主明年起可使用北斗卫星定位服务</a></li>
    <li><a href="http://t.163.com/jstvmengfei/status/3706007028503705259" title="">孟非微博盛赞白岩松 不愧是央视一哥</a></li>
    <li><a href="http://t.163.com/wuxiaobo/status/6382213403461277859" title="">吴晓波：来自韩剧中的四十岁感悟</a></li>
    <li><a href="http://ent.163.com/11/0320/22/6VKGL3UE00034JRU.html" title="">图集：独家曝光大S汪小菲婚礼现场</a></li>
    <li><a href="http://money.163.com/photoview/0HH40025/1376.html#p=6VLLUR4G0HH40025#fr=email" title="">图集:日本石油紧缺 车辆高速路上排队购</a></li>
</ul>
相应的jQuery代码为：

setInterval(function(){
    $('#leftBox li:last').css({'height':'0px','opacity': '0'}).insertBefore('#leftBox li:first').animate({'height':'35px','opacity': '1'}, 'slow', function() {
      $(this).removeAttr('style');
    });
},1000);