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

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

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

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

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

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

html代码如下:

1
2
3
4
5
6
7
8
<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代码如下:

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

好了,这个jquery新闻展示插件jquery news ticker就介绍到这里了,其实也挺简单的,基本上稍微翻译了一下。

最新文章

  1. Javascript前端和JAVA后端对加密库的处理实例
  2. jquery中on/delegate的原理
  3. NSRunLoop详解
  4. BZOJ2440 [中山市选2011]完全平方数
  5. unity资源管理
  6. LoopBar – Tap酒吧与无限滚动
  7. java 中的this关键字的几种用法
  8. zigbee 学习记录之一:资料搜索
  9. 第一章 SQL基础
  10. CListBox控件基本功能
  11. Windows7安装程序无法定位现有系统分区,也无法创建新的系统分区
  12. python scrapy解码方法和时间格式转换
  13. Linux命令:ssh-copy-id
  14. 【BUG记录】记一次游戏越来越卡的BUG
  15. Log4j发送邮件
  16. String与Date的互相转换
  17. IIS启用GZIP压缩js、css无效的原因及解决方法
  18. python 面向对象 私有属性
  19. kotlin Hello World 以及关键字
  20. [SPOJ SEQN] [hdu3439]Sequence

热门文章

  1. mongodb的命令介绍
  2. poi excel导入 数字自动加小数点
  3. 简单复利计算c语言实现
  4. PAT 甲级 1064 Complete Binary Search Tree
  5. c3p0连接池基本配置mysql和oracle
  6. PHP学习心得1
  7. 在Android上使用Socket
  8. 【设计模式】—— 原型模式Prototype
  9. log4net日志文件的应用
  10. 关于字符编码:ascii、unicode与utf-8