vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB。vTicker 支持自定义滚动时间、间隔时间、显示个数、滚动方向(向上/向下)、容器高度等等,但它对 HTML 结构有点小“苛刻”——容器里面只能是 ul 标签。不过如果你仅仅是需要一个垂直滚动效果的话,vTicker 仍然是一个很好的选择,毕竟它是如此的小巧方便。

使用方法

1、引入文件

1 <script src="js/jquery.min.js"></script>
2 <script src="js/jquery.vticker.js"></script>

2、HTML

01 <div class="w3ci">
02     <ul>
03         <li>1、新闻标题</li>
04         <li>2、新闻标题</li>
05         <li>3、新闻标题</li>
06         <li>4、新闻标题</li>
07         <li>5、新闻标题</li>
08         <li>6、新闻标题</li>
09         <li>7、新闻标题</li>
10         <li>8、新闻标题</li>
11     </ul>
12 </div>

4、JavaScript

1

$('.w3ci').vTicker();

使用方法

1、引入文件

1 <script src="js/jquery.min.js"></script>
2 <script src="js/jquery.vticker.js"></script>

2、HTML

01 <div class="w3ci">
02     <ul>
03         <li>1、新闻标题</li>
04         <li>2、新闻标题</li>
05         <li>3、新闻标题</li>
06         <li>4、新闻标题</li>
07         <li>5、新闻标题</li>
08         <li>6、新闻标题</li>
09         <li>7、新闻标题</li>
10         <li>8、新闻标题</li>
11     </ul>
12 </div>
 $(function()&nbsp;{
$('#scroller').vTicker({
speed:&nbsp;500, //滚动速度,单位毫秒。
pause:&nbsp;3000, //暂停时间,就是滚动一条之后停留的时间,单位毫秒。
showItems:&nbsp;10, //显示内容的条数。
animation:&nbsp;'fade', //动画效果,默认是fade,淡出。
mousePause:&nbsp;true, //鼠标移动到内容上是否暂停滚动,默认为true。
height:&nbsp;235, //滚动内容的高度。
direction:&nbsp;'up' //滚动的方向,默认为up向上,down则为向下滚动。
});
});

滚动新闻插件vticker的更多相关文章

  1. 基于jQuery实现滚动新闻代码下载

    分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX

    1.AJAX简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...

  3. 功能强大的滚动播放插件JQ-Slide

    查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...

  4. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

  5. fullPage教程 -- 整屏滚动效果插件 fullpage详解

    1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...

  6. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  7. jQuery.hhNewSilder 滚动图片插件

    /**  * jQuery.hhNewSilder 滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  8. 10 个 jQuery 的无限滚动的插件:

    很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容. 下面为你推荐 10 个 jQuery 的无限滚动的插件: 1.  ...

  9. javaScript滚动新闻

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Jquery+asp.net后台数据传到前台js进行解析的方法

    所以在解析后台数据的时候,我们需要根据后台的数据情况,特殊处理和对待. 我这里后台用的是asp.net提供的wcf服务,也有ashx一般处理程序.大致原理差不多. C#中我们经常用的对象,有实体对象比 ...

  2. 430的启动,I/O中断

    感言:看了这一集MSP430的讲解之后,我才知道msp430真的和arm7没什么区别了,可能在某些功能上要比arm7要优秀 1:430的系统复位和初始化初始化 430的系统复位有两个来源 1:POR上 ...

  3. js 中&& 与 ||

    /*** 几乎所有语言中||和&&都遵循“短路”原理,* 如&&中第一个表达式为假就不会去处理第二个表达式,而||正好相反.* js也遵循上述原则.* 当||时,找到为 ...

  4. TCP/IP 子网掩码浅析

    定义 是一种用来指明一个IP地址的哪些位标识的是主机所在的子网以及哪些位标识的是主机的位掩码.子网掩码不能单独存在,它必须结合IP地址一起使用.子网掩码只有一个作用,就是将某个IP地址划分成网络地址和 ...

  5. 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇01:道路的自动生成》

    1.道路的自动生成 道路自动生成概述: 3D跑酷游戏的核心就是跑,在跑这一过程中增加趣味性使得游戏具有更多的可玩性.道路的自动生成和自由拼接,为游戏增设了更多的不可预见性.这种不可预见性使得玩家在游戏 ...

  6. 关于java对象的思考

    不可变对象和类 由不可变类创建的对象就是不可变对象,要使一个类成为不可变的,它必须满足下面的需求: 所有数据域都是私有的 没有修改器方法 没有一个访问器的方法,它会返回一个指向可变数据域的引用 看下面 ...

  7. Oracle- PL/SQL DEV工具的使用收集

    1.工具---首选项---用户界面---编辑器----定制关键词 里面可以选择关键字是否大写 2.美化代码段,点击菜单edit,然后pl/sql beautifer,快捷键:PL/SQL Develo ...

  8. GPS两点的距离

    目前手头的一个项目要用到GPS地理定位信息,很自然的就需要知道两个地点之间的距离,于是上网找了一下,同样自然的就有一些算法贴出来..(网络真是帮了大忙,省得我再去翻几何书自己研究算法了!公式早都忘光了 ...

  9. USACO Feb. 2012

    Moo 找规律 吧 第一个是很久以前自己写的递归 #include<stdio.h> __int64 n; __int64 dfs(__int64 l,__int64 r,__int64 ...

  10. FormsAuthentication.GetRedirectUrl 方法

    https://msdn.microsoft.com/zh-cn/library/8a22t5t3(v=vs.80) FormsAuthentication.GetRedirectUrl 方法 .NE ...