即时新闻展示插件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. ...
随机推荐
- 未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”或它的某一个依赖项。系统找不到指定的文件
发布的打包项目在本机测试好使,部署到客户服务器上报错 分析器错误消息: 未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Cu ...
- 高可用集群(crmsh详解)http://www.it165.net/admin/html/201404/2869.html
crmsh是pacemaker的命令行接口工具,执行help命令,可以查看shell接口所有的一级命令和二级命令,使用cd 可以切换到二级子命令的目录中去,可以执行二级子命令 在集群中的资源有四类:p ...
- 个人作业-week3案例分析
第一部分 软件调研测评(必应词典移动端) 找到的bug: 在词汇量测试中每个单词给用户思考的时间太短,只有五秒钟.导致很多似曾相识的单词还没来得及想起就已经过了.如果说测的是用户记忆深刻的单词,那些记 ...
- beta阶段博客合集
第一次博客 第二次博客 第三次博客 第四次博客 第五次博客
- day1 学习历程
day1 我是一个在校大三学生,一个依然迷茫不知前景的大学混子= =,可以这么说吧 大学混子 真正开始决定好好学习大概在去年的12月份 那时经老师的提醒 开始正式接触软件开发 于是 从头开始学习语言 ...
- <context-param> 标签引出的 web.xml 文件的加载顺序 [转]
代码示例 : <context-param> <param-name>contextConfigLocation</param-name> <param-va ...
- redis压力测试工具-----redis-benchmark
redis做压测可以用自带的redis-benchmark工具,使用简单 压测命令:redis-benchmark -h 127.0.0.1 -p 6379 -c 50 -n 10000 压测需要一段 ...
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- html实现鼠标悬停变成手型实现方式
1.采用a标签实现的方式 <a href="javascript:void()">内容</a> 2.采用CSS实现的方式 // 变手形 oElement.s ...
- 数据结构之二叉树java实现
二叉树是一种非线性数据结构,属于树结构,最大的特点就是度为2,也就是每个节点只有一个左子树和一个右子树.二叉树的操作主要为创建,先序遍历,中序遍历,后序遍历.还有层次遍历.遍历有两种方式,一是采用递归 ...