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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
详解jenkins自动化部署vue
May 14 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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 数组遍历顺序理解
2009/09/09 PHP
php解析url的三个示例
2014/01/20 PHP
如何使用php实现评委评分器
2015/07/31 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
php测试kafka项目示例
2020/02/06 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python如何控制进程或者线程的个数
2020/10/16 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
酒店大堂副理的职责范文
2014/02/13 职场文书
物流专员岗位职责
2014/02/17 职场文书
《童趣》教学反思
2014/02/19 职场文书
勾股定理课后反思
2014/04/26 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
销售提升方案
2014/06/07 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
高三教师工作总结2015
2015/07/21 职场文书
施工安全协议书
2016/03/22 职场文书
导游词之井冈山
2019/11/20 职场文书