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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript函数详解
Nov 17 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
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
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python实现爬取并分析电商评论
2020/06/19 Python
浅析Python 序列化与反序列化
2020/08/05 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
公开服务承诺制度
2014/03/26 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
2015年计生协会工作总结
2015/04/24 职场文书