即时新闻展示插件jQuery News Ticker，超级简单！

最新推荐文章于 2024-08-16 08:54:53 发布

weixin_34401479

最新推荐文章于 2024-08-16 08:54:53 发布

阅读量804

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ranran/p/jquery_News_Ticker.html

版权

有时候我们为了节省页面空间，会在页面明显处放一小条，用来展示比较重要的即时新闻，一般以轮播的形式出现。今天要介绍的jQuery News Ticker插件就是用来实现这个即时新闻展示功能的，效果图如下：

jQuery news ticker是一个使用非常便捷的jQuery插件，能够非常方便地让你生成类似上图所示的一个新闻行情效果。插件的demo演示

它能够通过列表，HTML甚至是RSS（只能加载本站的RSS feed）来生成新闻内容，并且支持前后播放和停止。这个插件支持一系列的自定义选项，例如：

播放速度
播放效果
播放方向
显示时间

首先引入jQuery news ticker类库及其jQuery类库：

 
    
         < 
         link 
         href 
         = 
         "css/ticker-style.css" 
         rel 
         = 
         "stylesheet" 
         type 
         = 
         "text/css" 
         /> 
        
 
         < 
         script 
         src 
         = 
         "jquery.ticker.js" 
         type 
         = 
         "text/javascript" 
         ></ 
         script 
         > 
        
 
  

html代码如下：

 
    
         < 
         div 
         id 
         = 
         "ticker-wrapper" 
         class 
         = 
         "no-js" 
         > 
        
 
              
         < 
         ul 
         id 
         = 
         "js-news" 
         class 
         = 
         "js-hidden" 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "news-item" 
         >< 
         a 
         href 
         = 
         "#" 
         >This is the 1st latest news item.</ 
         a 
         ></ 
         li 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "news-item" 
         >< 
         a 
         href 
         = 
         "#" 
         >This is the 2nd latest news item.</ 
         a 
         ></ 
         li 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "news-item" 
         >< 
         a 
         href 
         = 
         "#" 
         >This is the 3rd latest news item.</ 
         a 
         ></ 
         li 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "news-item" 
         >< 
         a 
         href 
         = 
         "#" 
         >This is the 4th latest news item.</ 
         a 
         ></ 
         li 
         > 
        
 
              
         </ 
         ul 
         > 
        
 
         </ 
         div 
         > 
        
 
  

调用jquery news ticker的js代码如下：

 
         <script type= 
         "text/javascript" 
         > 
        
         $( 
         function 
         () { 
        
         $( 
         '#js-news' 
         ).ticker(); 
        
         }); 
        
         </script>