jquery滚动组件(vticker.js)实现页面动态数据的滚动效果


Posted in Javascript onJuly 03, 2013
<script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script> 
<script language="javascript" src="lirms/Test/vticker.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(".roll").each(function() { 
$(this).vTicker({ 
showItems : 18, //显示滚动行数 
pause : 3000, //滚动间歇 
speed : 500, //滚动速度 
animation : "fade", 
mousePause : false, 
direction : "up", //滚动方向 
}); 
}); 
}); 
</script>

似乎只有通过div-ul-li标签嵌套的方式才能实现表格多行多列的滚动效果(如有改进的地方,请多多指教!)
<div class="conn"> 
<table> 
<tr> 
<th style="width:50px;">序号</th> 
<th style="width:150px;">名称</th> 
<th style="width:80px;">季度完成量</th> 
<th style="width:50px;">昨日</th> 
<th style="width:70px;">完成进度</th> 
<th style="width:80px;">基本指标</th> 
<th style="width:70px;">挑战指标</th> 
</tr> 
<tr> 
<td colspan="7"> 
<div class="roll"> 
<ul> 
<c:forEach items="${statislist}" var="s" varStatus="i"> 
<c:set var="cs" value=""></c:set> 
<c:set var="index" value=""></c:set> 
<c:if test="${i.index < 9 }"> 
<c:set var="index" value="0"></c:set> 
</c:if> 
<c:if test="${i.index % 2==0}"> 
<c:set var="cs" value="background:#ebf6fd;"></c:set> 
</c:if> 
<li style="height:30px;width:550px;line-height:30px;${cs}"> 
<div style="width:50px;text-align:center;float:left;">${index} ${i.count}</div> 
<div style="width:150px;text-align:center;float:left;">${s.name}</div> 
<div style="width:80px;text-align:center;float:left;">${s.number}</div> 
<div style="width:50px;text-align:center;float:left;">${s.zuori}</div> 
<div style="width:70px;text-align:center;float:left;">${s.wcjb}</div> 
<div style="width:80px;text-align:center;float:left;">${s.jbzb}</div> 
<div style="width:70px;text-align:center;float:left;">${s.tzzb}</div> 
</li> 
</c:forEach> 
</ul> 
</div> 
</td> 
</tr> 
</table> 
</div>
Javascript 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
JS去除右边逗号的简单方法
Jul 03 #Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 #Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 #Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 #Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 #Javascript
JS实现可改变列宽的table实例
Jul 02 #Javascript
js 图片随机不定向浮动的实现代码
Jul 02 #Javascript
You might like
咖啡的传说和历史
2021/03/03 新手入门
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详谈python http长连接客户端
2017/06/12 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
OpenCV 模板匹配
2019/07/10 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
初中生自我鉴定
2014/02/04 职场文书
空乘英文求职信
2014/04/13 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
工作简报格式范文
2015/07/21 职场文书
单位车辆管理制度
2015/08/05 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
nginx 配置指令之location使用详解
2022/05/25 Servers
Android中的Launch Mode详情
2022/06/05 Java/Android
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android