有时候我们为了节省页面空间,会在页面明显处放一小条,用来展示比较重要的即时新闻,一般以轮播的形式出现。今天要介绍的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. 用go实现的一个堆得数据结构

    用golang实现的堆,主要提供了两个方法,push和pop及堆的大小,代码如下: package main import ( "errors" "fmt" ) ...

  2. python response.text和response.content的区别

      1.重点理解 response.text返回的类型是str response.content返回的类型是bytes,可以通过decode()方法将bytes类型转为str类型 推荐使用:respo ...

  3. TP5 助手函数与TP3.2单字母函数

    一.TP5 助手函数 助手函数 描述 abort 中断执行并发送HTTP状态码 action 调用控制器类的操作 cache 缓存管理 config 获取和设置配置参数 controller 实例化控 ...

  4. JS 把数组按倒序排列

    var achearr=[1,2,3,4]; var bchearr=[]; //方法1: for (var i = 0; i <=achearr.length;i++) { bchearr.p ...

  5. Python学习笔记day01--Python基础

    1 python的应用     Python崇尚优美.清晰.简单,是一个优秀并广泛使用的语言.     Python可以应用于众多领域,如:数据分析.组件集成.网络服务.图像处理.数值计算和科学计算等 ...

  6. 关于OpenGL游戏全屏模式的设置

    使用DirectX的API的话可以给游戏窗口设置指定的显示器和全屏独占模式,但是如果使用OpenGL的API就比较遗憾不能直接设置. 以下内容基于Windows系统. 如果使用OpenGL渲染,第一步 ...

  7. 为什么有时候访问某些加密https网站是不需要证书的? https? ssl?

    根证书是CA颁发给自己的证书, 是信任链的起点 1.所有访问https的网站都是需要证书的. 2.对于某些网站,尤其是证书颁发机构的网站,操作系统自动添加了这些网站访问需要的证书到证书管理器中,所以就 ...

  8. Navicat使用教程:获取MySQL中的高级行数(第2部分)

    Navicat Premium是一个可连接多种数据库的管理工具,它可以让你以单一程序同时连接到MySQL.Oracle及PostgreSQL数据库,让管理不同类型的数据库更加的方便. 在上篇文章中,我 ...

  9. C#基础-如何找到devenv的路径位置

    一.前言        今年开始安装了VS2017,有时候需要使用到脚本编译,奈何MS在VS2017上的脚本编译上不再支持VS2015那种 "%VS140COMNTOOLS%vsvars32 ...

  10. Linux使用技巧(一):vim中选中多行、复制和粘贴

    一.选中多行: 使用命令vim打开文件,移动光标至所选行的开头,按v进入视图,键盘上按向下键,选中所需行即可. 二.复制与粘贴 三种方法: 1)在上文第一部分的基础上,按y,然后移动光标至所需粘贴处, ...