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. 《Python基础教程(第二版)》学习笔记 -> 第二章 列表和元组

    本章将引入一个新的概念:数据结构. 数据结构是通过某种方式阻止在一起的数据元素的集合,这些数据元素可以是数字或者字符,设置可以是其他数据结构. Python中,最基本的数据结构是序列(Sequence ...

  2. cloudera manager 及CDH卸载

    记录用户数据路径 删除用户数据 中列出的用户数据路径 /var/lib/flume-ng /var/lib/hadoop* /var/lib/hue /var/lib/navigator /var/l ...

  3. OpenStack Swift client开发

    如果你搭建好了Swift环境 ,你应该可以通过Swift 命令 来尝试去测试上传下载等功能,这是因为在安装Swift的时候,通常会安装一个python-swiftclient客户端,这个一个pytho ...

  4. OWC控件的使用

    环境:SQL Server 2005  Analysis Services + OWC 1.1 +Win 7 准备: 1.在SQL Server 2005 Analysis Services建好ola ...

  5. Java Script after Douglas Crockford's Training (JSON father)

    有幸能参加大牛的培训,学到了很多东西,下面总结一下: 1.总的思想是每一门语言都有好有坏,我们要通过好的代码规范和其他一些方式去避免使用糟糠的那一部分.JS有很多缺点,但是也有很多优点,我们就用他的优 ...

  6. HDU4862-Jump(最大流量最大费用流)

    题意:有n*m的格子,每一个格子包含一个数字,0-9.你初始的能量为0,你可以玩k次,每一个你可以选择你现在的格子的正下方或者正右方的任意一个格子跳,但必须是之前没有跳过的格子.每玩一次你都可以跳任意 ...

  7. jQuery-menu-aim有時候不能觸發BUG解決辦法

    在使用jQuery-menu-aim菜單時有時候鼠標移上去會發現樣式有改變但是第二階菜單卻沒有出現的問題 解決辦法:在exitMenu的方法中加入return true; 如下所示: exitMenu ...

  8. struct stat 作用

    stat,lstat,fstat1 函数都是获取文件(普通文件,目录,管道,socket,字符,块()的属性.函数原型#include <sys/stat.h> int stat(cons ...

  9. SecureCRT配置显示的字符集

  10. 射频识别技术漫谈(7)——ID卡【worldsing笔记】

    ID(Identification)是识别的意思,ID卡就是识别卡.ID卡包含范围广泛,只要具有识别功能的卡片都可以叫ID卡,例如条码卡,磁卡都可以是ID卡,我们这儿说的当然是射频识别卡. 射频ID卡 ...