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. MapReduce:Shuffle过程的流程

    Shuffle过程是MapReduce的核心,Shuffle描述着数据从map task输出到reduce task输入的这段过程. 1.map端

  2. 线性存储结构-Stack

    Stack继承于Vector,是一个模拟堆栈结构的集合类.当然也属于顺序存储结构.这里注意Android在com.android.layoutlib.bridge.impl包中也有一个Stack的实现 ...

  3. STM32 USB-HID通信移植步骤

    大家可以使用压缩包中的UsbApp.exe调试本软件idVendor为:0483  idProduct为5750. 今天太晚了,明天还要上半天班,上位机软件找个时间在写一篇文章.请关注我的博客.压缩包 ...

  4. Oracle数据库中truncate命令和delete命令的区别

    首先讲一下,truncate命令: 语法:TRUNCATE  TABLE  table; 表格里的数据被清空,存储空间被释放. 运行后会自动提交,包括之前其它未提交的会话,因而一旦清空无法回退. 只有 ...

  5. C语言基础--宏

    宏在C语言中经常使用,在linux的源码中可以看到很多宏的高级应用.因此不理解宏,就很难理解代码.本文参考一些互联网资料做一些总结,希望给大家带来帮助. 先说说使用宏的优点及缺点: 优点: 1.提高代 ...

  6. mybatis系列-03-入门程序

    3.1     需求 根据用户id(主键)查询用户信息 根据用户名称模糊查询用户信息 添加用户 删除 用户 更新用户 3.2     环境 java环境:jdk1.7.0_79 eclipse mys ...

  7. 问题-关于SizeOf在Delphi7和Delphi2009下结果分别是16/32

    问题:同样的代码在Delphi7和Delphi2009下结果分别是16/32,为什么?var   LWindCode : array [0..15] of char; begin   showmess ...

  8. 远程控制篇:用Delphi模拟键盘输入/鼠标点击

    模拟键盘我们用Keybd_event这个api函数,模拟鼠标按键用mouse_event函数. Keybd_event函数能触发一个按键事件,也就是会产生一个WM_KEYDOWN或WM_KEYUP消息 ...

  9. AD板层定义介绍(二)

    1.顶层信号层(Top Layer):也称元件层,主要用来放置元器件,对于比层板和多层板可以用来布线: 2.中间信号层(Mid Layer): 最多可有30层,在多层板中用于布信号线. 3.底层信号层 ...

  10. Android 添加、移除和判断 桌面快捷方式图标

    思路: Launcher为了应用程序能够定制自己的快捷图标,就注册了一个 BroadcastReceiver 专门接收其他应用程序发来的快捷图标定制信息.所以只需要根据该 BroadcastRecei ...