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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
fetch 如何实现请求数据
Dec 20 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
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
vue-router传参用法详解
2019/01/19 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
如何理解python对象
2020/06/21 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
金融事务专业毕业生求职信
2014/02/23 职场文书
如何写早恋检讨书
2014/09/10 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
详解Laravel服务容器的优势
2021/05/29 PHP