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. dynamips虚拟服务:找不到指定设备

    刚开始接触dynamips,属于新手, 之前是可以正常使用dynamips的,但不知道什么原因就出现这样的问题 果断重新安装,之后可以正常使用

  2. uva 10652

    大意:有n块矩形木板,你的任务是用一个面积尽量小的凸多边形把它们包起来,并计算出木板站整个包装面积的百分比. 思路:按照题意将所有矩形顶点坐标存起来,旋转时先旋转从中心出发的向量,求得各个坐标之后,求 ...

  3. php 仿百度文库

    http://www.haosblog.com/?mod=article_read&id=386

  4. 恒天云技术分享系列6 – vLan网络原理解析

    转载自恒天云官网:http://www.hengtianyun.com/download-show-id-15.html Vlan网络模式优点 增加网络可扩展性 网络隔离,每个租户拥有独立的网络及vl ...

  5. A Tour of Go Buffered Channels

    Channels can be buffered. Provide the buffer length as the second argument to make to initialize a b ...

  6. 【Stage3D学习笔记续】山寨Starling(一):从事件说起

    我在GitHub上新开了一个项目:https://github.com/hammerc/hammerc-study-Stage3D 山寨的Starling版本我取名叫做Scorpio2D,以后的笔记中 ...

  7. jsp值传到后台Struts2中的action三种方法

    Action接收表单传递过来的参数有3种方法: 如,登陆表单login.jsp: <form action="login" method="post" n ...

  8. IOS开发常用技术网站

    IOS常用网站:    1.http://www.cocoachina.com    2.http://oschina.net    3.http://code4app.com

  9. JQuery.Ajax之错误调试帮助信息介绍

    下面是Jquery中AJAX参数详细列表: timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async Boolean (默认: true) 默认设置下,所有请求均为异 ...

  10. git克隆远程项目分支到本地对应分支

    最近公司改用git了,研究了一下如何把远程的代码克隆到本地. 1. 配置对应信息 git config --global user.name git config --global user.emai ...