即时新闻展示插件jQuery News Ticker,超级简单!
2024-08-24 17:05:25
有时候我们为了节省页面空间,会在页面明显处放一小条,用来展示比较重要的即时新闻,一般以轮播的形式出现。今天要介绍的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就介绍到这里了,其实也挺简单的,基本上稍微翻译了一下。
最新文章
- Javascript前端和JAVA后端对加密库的处理实例
- jquery中on/delegate的原理
- NSRunLoop详解
- BZOJ2440 [中山市选2011]完全平方数
- unity资源管理
- LoopBar – Tap酒吧与无限滚动
- java 中的this关键字的几种用法
- zigbee 学习记录之一:资料搜索
- 第一章 SQL基础
- CListBox控件基本功能
- Windows7安装程序无法定位现有系统分区,也无法创建新的系统分区
- python scrapy解码方法和时间格式转换
- Linux命令:ssh-copy-id
- 【BUG记录】记一次游戏越来越卡的BUG
- Log4j发送邮件
- String与Date的互相转换
- IIS启用GZIP压缩js、css无效的原因及解决方法
- python 面向对象 私有属性
- kotlin Hello World 以及关键字
- [SPOJ SEQN] [hdu3439]Sequence