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 相关文章推荐
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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一些有意思的小区别
2006/12/06 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python bisect模块原理及常见实例
2020/06/17 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
秋季婚礼证婚词
2014/01/11 职场文书
读书活动总结范文
2014/04/26 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js