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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
js实现百度登录窗口拖拽效果
Mar 19 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python代码需要缩进吗
2020/07/01 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
热门专业求职信
2014/05/24 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
自主招生专家推荐信
2015/03/26 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
龙猫观后感
2015/06/09 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
APP界面设计技巧和注意事项
2022/04/29 杂记
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL