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. (二)NUnit单元测试心得

    现在接着上次说到的内容,如何在项目中进行单元测试.由于做了一些调整,我上次发的内容,我这次也会重新发一次,请认真看看. 一.软件开发过程中存在的问题(没有使用单元测试的情况下) 难于定位bug的位置 ...

  2. 【译】 AWK教程指南 4通过文本内容和对比选择指定的记录

    Pattern { Action }为awk中最主要的语法.若某Pattern的值为真则执行它后面的 Action. awk中常使用"关系表达式" (Relational Expr ...

  3. 中断——中断描述符表的定义和初始化(二) (基于3.16-rc4)

    上篇博文对中断描述符表(IDT)中异常和非屏蔽中断部分的初始化做了说明,这篇文章将分析外部中断部分的初始化. 在上篇博文中,可以看到,内核在setup_once汇编片段中,对中断和异常部分做了初步的初 ...

  4. 【转】 bash简介及通配符、扩展通配符 shopt -s extglob

    http://www.rhce.cc/?p=1005 当我们执行一些命令的时候,很多的命令是由bash提供的.如果我们想知道某个命令是否是由bash内置的命令的话,我们可以使用type bash内置命 ...

  5. 【创建本地仓库】【for Centos】CentOS下创建本地repository

    [日期]2014年4月24日 [平台]Centos 6.5 [工具]httpd yum-utils createrepo [步骤] 1)安装httpd. yum install httpd 2)安装y ...

  6. algorithm@ lower_bound implementation(Binary Search)

    一道来自jhu algorithm的作业题: Given two sorted arrays A, B, give a linear time algorithm that finds two entr ...

  7. Code Understanding Step by Step - We Need a Task

      Code understanding is a task we are always doing, though we are not even aware that we're doing it ...

  8. Oracle- 数据库的备份

    Oracle中对数据对象和数据的管理,无疑都是使用PL/SQL Developer来进行管理,该工具也提供给我们很多方便.快捷的操作,使得我们不再为Oracle本身丑陋.难用的UI而抱怨.由于我们一般 ...

  9. 多年的.NET开发,也只学会了这么几招

    折腾了这么多年的.NET开发,也只学会了这么几招 软件开发不是生活的全部,但是好的生活全靠它了   随着工作年龄逐渐增加,身边的重担也越来越多.以前可以在公司加班到晚上10点,现在不行了.以前可以通宵 ...

  10. SMP和MAPP的区别

    SMP(Symmetrical Multi-Processing),对称多处理系统,是指在一个计算机上汇集了一组处理器(多CPU),各CPU之间共享内存子系统以及总线结构.它是相对非对称多处理技术而言 ...