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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
JS实现简易留言板增删功能
Feb 08 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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 curl模拟post请求小实例
2013/11/13 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python3正则模块re的使用方法详解
2020/02/11 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
优秀护士获奖感言
2014/02/20 职场文书
毕业寄语大全
2014/04/09 职场文书
交通事故调解协议书
2014/04/16 职场文书
大学社团计划书
2014/05/01 职场文书
基层党员对照检查材料
2014/08/25 职场文书