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 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
使用vue构建多页面应用的示例
Oct 22 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
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
CCPry JS类库 代码
2009/10/30 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery 插件开发备注
2010/08/27 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python3 下载网络图片代码实例
2019/08/27 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
销售总监岗位职责
2014/01/04 职场文书
就业协议书的作用
2014/04/11 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
村官个人总结范文
2015/03/03 职场文书
绿里奇迹观后感
2015/06/15 职场文书