JS实现排行榜文字向上滚动轮播效果

最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播，故根据下面的简单列子修改实现了滚动效果。

效果图(文字向上轮播)：

demo如下：

  
          
        
    
    
    
    
      *{margin:0;padding:0;}
      ul,li{list-style:none;display:block;}
      #scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
      #scrollBox #con1,#con2{width:280px;float:left;}
      #scrollBox li{height:15px;line-height:15px;text-align:center;}

    

  
 
    
  
    

      
李华 中了10块钱

      
Leo 中了一个手机

      
刘明 中了一块毛巾

      
ll 中了保温杯

      
nice 中了100块钱红包

      
108 中了20元优惠券

      
ok 中了100块钱

      
    

  
  
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。