即时新闻展示插件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. ...
随机推荐
- 微信小程序demo——入门级(附源码)
最近小程序又蠢蠢欲动,出了一个公众号绑定小程序功能,目测不错,就看了下微信小程序文档,顺便写了几行代码,后续有空会持续更新维护. 源码:https://github.com/SibreiaDante/ ...
- Navicat for MySQL笔记1
1.MySQL数据库的基本操作 A.系统数据库 安装MySQL数据库服务器后,自带的数据库. B.用户数据库 用户根据实际需求所创建的数据库. C.数据库对象 表.视图.存储过程.函数.触发器以及事件 ...
- Sql Server中判断表、列不存在则创建的方法[转]
一.Sql Server中如何判断表中某列是否存在 首先跟大家分享Sql Server中判断表中某列是否存在的两个方法,方法示例如下: 比如说要判断表A中的字段C是否存在两个方法: 第一种方法 ? ...
- net user 修改密码的坑
不多说 直接上图 自己偷懒修改 admin的密码.. 结果没注意 这个地方 能够输入全角字符. 造成密码 实质上是全角的 标点符号 ... 以后一定注意一些. 里面的坑..说多了 都是浪费时间 另外 ...
- C++ STL 常用拷贝和替换算法
C++ STL 常用拷贝和替换算法 copy() 复制 vector<int> vecIntA; vecIntA.push_back(1); vecIntA.push_back(3); v ...
- 【比赛】NOIP2017 小凯的疑惑
找规律:ans=a*b-a-b 证明:(可见 体系知识) gcd(A, B) = 1 → lcm(A, B) = AB 剩余类,把所有整数划分成m个等价类,每个等价类由相互同余的整数组成 任何数分成m ...
- 洛谷 P3205 [HNOI2010]合唱队 解题报告
P3205 [HNOI2010]合唱队 题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为 ...
- 20135319zl字符集报告
字符集实验 ASCII 首先,查找ZHULI五个字符对应的ASCII码,5a 48 55 4c 49. 然后,用vim打开一个空文档,按下":",输入%!xxd 然后,输入 000 ...
- Android Studio快捷键设置之实现原eclipse中ctrl+m的全屏的效果
如下图,keymap设置成eclipse的的,但是鼠标双击最大化复原没有,ctr+M全屏也没有, 那么久在如下图的三个项目上添加鼠标双击和快捷键---自己方便好用,但不冲突的 Toggle full ...
- Android Layout: TableLayout
TableLayout<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" andr ...