jq上下无缝滚动实例

滚动演示

*{padding:0; margin:0;font-size:12px;}

body{ color:#333; background-color:#fff; padding:20px;}

ul{list-style:none;}

h4{font-size:14px; text-align:center; padding:10px;}

a{color:#03f;}

button{padding:2px 8px;}

.action{text-align:center; padding:10px; border-bottom:dashed 1px #ccc;}

#box{width:800px; margin:0 auto; padding:10px;}

#leftDemo,#rightDemo{width:390px; border:solid 1px #ccc; background:#ffe; float:left; padding:20px 0;}

#leftDemo{margin-right:10px;}

ul{padding:10px; height:92px; overflow:hidden;}

ul li{line-height:180%; height:35px; overflow:hidden;white-space:nowrap;}

    

        

            

向下滚动演示

            开始

            

                

  • 卡扎菲号召全国皆兵 向人民打开武器库
  •                 

  • 利比亚首都遭空袭 政府军射防空炮反击
  •                 

  • 私家车主明年起可使用北斗卫星定位服务
  •                 

  • 孟非微博盛赞白岩松 不愧是央视一哥
  •                 

  • 吴晓波:来自韩剧中的四十岁感悟
  •                 

  • 图集:独家曝光大S汪小菲婚礼现场
  •                 

  • 图集:日本石油紧缺 车辆高速路上排队购
  •             

            

            

                

    向上滚动演示

                开始

                

                    

  • 卡扎菲号召全国皆兵 向人民打开武器库
  •                 

  • 利比亚首都遭空袭 政府军射防空炮反击
  •                 

  • 私家车主明年起可使用北斗卫星定位服务
  •                 

  • 孟非微博盛赞白岩松 不愧是央视一哥
  •                 

  • 吴晓波:来自韩剧中的四十岁感悟
  •                 

  • 图集:独家曝光大S汪小菲婚礼现场(Attention to this english charector)
  •                 

  • 图集:日本石油紧缺 车辆高速路上排队购
  •             

            

            

            http://www.51obj.cn

        

    $('#btnStopUp').click(function(){

        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);

        $(this).attr('disabled',true);

        return;

    });

    $('#btnStopDown').click(function(){

        setInterval(function(){

            $('#rightBox li:first').animate({'height':'0','opacity': '0'}, 'slow', function() {

              $(this).removeAttr('style').insertAfter('#rightBox li:last');

            });

        },1000);

        $(this).attr('disabled',true);

        return;

    });

    你可能感兴趣的:(jq上下无缝滚动实例)