有时候我们为了节省页面空间,会在页面明显处放一小条,用来展示比较重要的即时新闻,一般以轮播的形式出现。今天要介绍的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就介绍到这里了,其实也挺简单的,基本上稍微翻译了一下。

即时新闻展示插件jQuery News Ticker,超级简单!的更多相关文章

  1. 简单方便的在线客服展示插件 jQuery.onServ

    onServ jQuery.onServ 是一款简单方便的在线客服jQuery 插件,可以使任意html实现弹出展示在线客服效果, 可以自定义内容,简单配置出多个弹出动作特效,设置位置和样式. git ...

  2. 强大的图片展示插件,JQuery图片预览展示插件

    只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...

  3. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  4. html超级简单实现点赞(收藏)和取消赞效果

    1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀.今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示. 2.详情 1.css样式 .like{ font-size:6 ...

  5. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

  6. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  7. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  8. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  9. jQuery Panorama Viewer – 360度全景展示插件

    jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片.要做到这一点,首先只需要在页面中引入最新的 jQuery 库,以及 jquery.panorama_viewer. ...

随机推荐

  1. 记:ASP.NET Core开发时部署到IIS上出现HTTP Error 502.5 - Process Failure的解决方案

    HTTP Error 502.5 - Process Failure Common causes of this issue: The application process failed to st ...

  2. 详解Android微信登录与分享

    Android 使用微信登录.分享功能 具体的文档详情微信官网上介绍(微信官网文档),本人直接按照项目部署步骤进行讲解: 第一步:申请你的AppID: 第二步:依赖 dependencies { co ...

  3. sql%bulk_rowcount && sql%rowcount 的使用

    说明: %BULK_ROWCOUNT 属性计算FORALL迭代影响行数 在进行SQL数据操作语句时,SQL引擎打开一个隐式游标(命名为SQL),该游标的标量属性(scalar attribute)有 ...

  4. 【硬件】- 英特尔CPU命名规则

    前言 一款Intel CPU的命名,一般由5个部分组成:品牌,品牌标识符,Gen标识,SKU数值,产品线后缀. 以下图为例: 品牌 英特尔旗下处理器有许多子品牌,包括我们熟悉的凌动(ATOM).赛扬( ...

  5. BZOJ2806_Cheat

    Ctsc2012的题目.做完感觉自己瞬间变高富帅了. 不过回想其实也觉得不难,想到用单调队列就很简单了,还有二分= =.呵 对于给出的一篇文章,如果你们将它分成若干段,并在所有长度不小于L的片段在字典 ...

  6. RF相关知识

    前言:下文中的总结都是来自于网络,有的来自与博客,有的来自于维基百科/百度百科,仅仅是为了方便查看.   ASK: ASK:幅移键控调制的简写,例如二进制的,把二进制符号0和1分别用不同的幅度来表示, ...

  7. 父类是在子类创建对象时候 在子类中创建一个super内存空间

    父类是在子类创建对象时候 在子类中创建一个super内存空间

  8. 你好,OI

    高二了才开通真正意义上的博客...以前一直比较懒没写过什么,现在为了给自己留下一点回忆还是过来了. 上半年的那次失败还是历历在目啊...几个月来一直在我心中挥之不去.虽说也是自己的能力不足造成的,但是 ...

  9. JS中JSON对象和JSON字符串的相互转化

    转:http://www.cnblogs.com/wbyp/p/7086318.html 一.JSON字符串转换为JSON对象 var str = '{"name":"c ...

  10. 【比赛】NOIP2017 逛公园

    考试的时候灵光一闪,瞬间推出DP方程,但是不知道怎么判-1,然后?然后就炸了. 后来发现,我只要把拓扑和DP分开,中间加一个判断,就AC了,可惜. 看这道题,我们首先来想有哪些情况是-1:只要有零环在 ...