即时新闻展示插件jQuery News Ticker,超级简单!
有时候我们为了节省页面空间,会在页面明显处放一小条,用来展示比较重要的即时新闻,一般以轮播的形式出现。今天要介绍的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,超级简单!的更多相关文章
- 简单方便的在线客服展示插件 jQuery.onServ
onServ jQuery.onServ 是一款简单方便的在线客服jQuery 插件,可以使任意html实现弹出展示在线客服效果, 可以自定义内容,简单配置出多个弹出动作特效,设置位置和样式. git ...
- 强大的图片展示插件,JQuery图片预览展示插件
只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- html超级简单实现点赞(收藏)和取消赞效果
1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀.今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示. 2.详情 1.css样式 .like{ font-size:6 ...
- jQuery手风琴广告展示插件
效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件
今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...
- 超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- jQuery Panorama Viewer – 360度全景展示插件
jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片.要做到这一点,首先只需要在页面中引入最新的 jQuery 库,以及 jquery.panorama_viewer. ...
随机推荐
- 记: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 ...
- 详解Android微信登录与分享
Android 使用微信登录.分享功能 具体的文档详情微信官网上介绍(微信官网文档),本人直接按照项目部署步骤进行讲解: 第一步:申请你的AppID: 第二步:依赖 dependencies { co ...
- sql%bulk_rowcount && sql%rowcount 的使用
说明: %BULK_ROWCOUNT 属性计算FORALL迭代影响行数 在进行SQL数据操作语句时,SQL引擎打开一个隐式游标(命名为SQL),该游标的标量属性(scalar attribute)有 ...
- 【硬件】- 英特尔CPU命名规则
前言 一款Intel CPU的命名,一般由5个部分组成:品牌,品牌标识符,Gen标识,SKU数值,产品线后缀. 以下图为例: 品牌 英特尔旗下处理器有许多子品牌,包括我们熟悉的凌动(ATOM).赛扬( ...
- BZOJ2806_Cheat
Ctsc2012的题目.做完感觉自己瞬间变高富帅了. 不过回想其实也觉得不难,想到用单调队列就很简单了,还有二分= =.呵 对于给出的一篇文章,如果你们将它分成若干段,并在所有长度不小于L的片段在字典 ...
- RF相关知识
前言:下文中的总结都是来自于网络,有的来自与博客,有的来自于维基百科/百度百科,仅仅是为了方便查看. ASK: ASK:幅移键控调制的简写,例如二进制的,把二进制符号0和1分别用不同的幅度来表示, ...
- 父类是在子类创建对象时候 在子类中创建一个super内存空间
父类是在子类创建对象时候 在子类中创建一个super内存空间
- 你好,OI
高二了才开通真正意义上的博客...以前一直比较懒没写过什么,现在为了给自己留下一点回忆还是过来了. 上半年的那次失败还是历历在目啊...几个月来一直在我心中挥之不去.虽说也是自己的能力不足造成的,但是 ...
- JS中JSON对象和JSON字符串的相互转化
转:http://www.cnblogs.com/wbyp/p/7086318.html 一.JSON字符串转换为JSON对象 var str = '{"name":"c ...
- 【比赛】NOIP2017 逛公园
考试的时候灵光一闪,瞬间推出DP方程,但是不知道怎么判-1,然后?然后就炸了. 后来发现,我只要把拓扑和DP分开,中间加一个判断,就AC了,可惜. 看这道题,我们首先来想有哪些情况是-1:只要有零环在 ...