jQuery的新闻播报

所属分类:其他-动画效果

 37742  320  查看评论 (2)
分享到微信朋友圈
X
jQuery的新闻播报 ie兼容6

jQuery News Ticker灵感来自BBC新闻网站的报价, jQuery News Ticker带来一个轻量级且易于使用jQuery的新闻播报效果。

它可以从无序的列表,RSS,或一个HTML文件中取得要打字的内容。然后一个可以定制的界面中显示。

在显示界面中有向前/向后,播放/暂停控制新闻浏览。

使用步骤

html引用

<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

jQuery的(1.4.2或以上),以使这一切工作,我建议使用最新版本的谷歌的Ajax库API。


需要一些HTML,使这个新闻播报工作?

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

让它动起来

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


参数配置

$(function () {
    $('#js-news').ticker(
        speed: 0.10,           // 速度
        ajaxFeed: false,       // 填充的jQuery新闻
        feedUrl: false,        // 供稿网址
	                       // 必须在同一个域中
        feedType: 'xml',       // 目前格式XML 
        htmlFeed: true,        // 填充的jQuery新闻播报通过HTML
        debugMode: true,       // 显示在控制台中一些有用的错误或警报
  	                       
        controls: true,        // 是否或不显示的jQuery新闻北京时间控制
        titleText: 'Latest',   // 要删除的标题设置为空String 
        displayType: 'reveal', // 显示类型 'reveal' or 'fade'
        direction: 'ltr'       // Ticker direction - current options are 'ltr' or 'rtl'
        pauseOnItems: 2000,    // 暂停前的新闻项目被取代
        fadeInSpeed: 600,      // 淡入淡出的速度动画
        fadeOutSpeed: 300      // 速度淡出动画
    );
});			

到目前为止已经测试这个插件工作:IE6 +,FF 3.6 +,Chrome浏览器,Safari浏览器,Safari浏览器移动和Opera。

如果你想加入rss数据

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker({
            htmlFeed: false,
            ajaxFeed: true,
            feedUrl: 'PUT THE URL OF THE RSS FEED HERE - e.g. http://example.com/rss.xml',
            feedType: 'xml'
        });
    });
</script>
相关插件-动画效果

html5 canvas粒子星空

html5 canvas鼠标跟随粒子星空动画
  动画效果
 76620  742

购物车商品飞入动画

使用css规则简单实现商品飞入效果
  动画效果
 22034  262

jquery实现烟花特效

基于jquery 实现放烟花特效。使用简单,仅仅需要一个div,可以自由配置(感谢“腰长腿却短
  动画效果
 54058  405

jQuery超酷文字淡入淡出显示特效

文字淡入淡出显示特效
  动画效果
 35792  363

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    someone.sth 0
    2016/11/8 23:11:36
    下面的看到了 知道怎么解决了 谢谢 很好用!  回复
    someone.sth 0
    2016/11/8 23:11:40
    怎么给 每一条 公告放置 url 链接呀 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复