首页>>Jquery文字>>jQuery垂直新闻滚动代码(2017-07-05)

jQuery垂直新闻滚动代码

 包括手动与自动滚动

jQuery垂直新闻滚动代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="col-md-4">  
  2.                     <div class="panel panel-default">  
  3.                         <div class="panel-heading">  
  4.                             <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>  
  5.                         <div class="panel-body">  
  6.                             <div class="row">  
  7.                                 <div class="col-xs-12">  
  8.                                     <ul class="demo2">  
  9.                                         <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>  
  10.                                         <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>  
  11.                                         <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>  
  12.                                         <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>  
  13.                                         <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>  
  14.                                         <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>  
  15.                                           
  16.                                     </ul>  
  17.                                 </div>  
  18.                             </div>  
  19.                         </div>  
  20.                         <div class="panel-footer">  
  21.   
  22.                         </div>  
  23.                     </div>  
  24.                 </div>  

 

JavaScript Code
  1. $(".demo2").bootstrapNews({  
  2.             newsPerPage: 4,  
  3.             autoplay: true,  
  4.             pauseOnHover: true,  
  5.             navigation: false,  
  6.             direction: 'down',  
  7.             newsTickerInterval: 2500,  
  8.             onToDo: function () {  
  9.                 //console.log(this);  
  10.             }  
  11.         });  

 


原文地址:http://www.freejs.net/article_jquerywenzi_625.html