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 相关文章推荐
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
如何编写高质量JS代码
Dec 28 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
JS实现简易日历效果
Jan 25 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防注
2007/01/15 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PDO::inTransaction讲解
2019/01/28 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
Script的加载方法小结
2011/01/12 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
js编写选项卡效果
2017/05/23 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
python实现绘制树枝简单示例
2014/07/24 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python修改字典键(key)的方法
2019/08/05 Python
NumPy排序的实现
2020/01/21 Python
django的autoreload机制实现
2020/06/03 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python中count函数知识点浅析
2020/12/17 Python
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
回门宴父母答谢词
2014/01/26 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers