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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
JavaScript实现手风琴效果
Feb 18 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP时间和日期函数详解
2015/05/08 PHP
JS 继承实例分析
2008/11/04 Javascript
JS实现self的resend
2010/07/22 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
vue组件生命周期详解
2017/11/07 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python绘图实现显示中文
2019/12/04 Python
Python多分支if语句的使用
2020/09/03 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
辞旧迎新演讲稿
2014/09/15 职场文书
对照检查剖析材料
2014/09/30 职场文书
专职安全员岗位职责
2015/04/11 职场文书
民主生活会意见
2015/06/05 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang