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.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
星际争霸中的热键
2020/03/04 星际争霸
谈谈PHP语法(2)
2006/10/09 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
js实现炫酷的左右轮播图
2017/01/18 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
用原生JS实现简单的多选框功能
2017/06/12 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
js/jQuery实现全选效果
2019/06/17 jQuery
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python快速从注释生成文档的方法
2016/12/26 Python
python中自带的三个装饰器的实现
2019/11/08 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
一些Solaris面试题
2013/03/22 面试题
公司领导推荐信
2013/11/12 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
党小组推荐意见
2015/06/02 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫