<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>

页面动态数据的滚动效果——jquery滚动组件(vticker.js)的更多相关文章

  1. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  2. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  3. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  4. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  5. 【微信小程序】模仿58同城页面制作以及动态数据加载

    完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...

  6. Echarts基于动态数据初步使用 及问题 代码记录.

    ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...

  7. [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

  8. jQuery实现浮动层跟随页面滚动效果

      helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery  滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...

  9. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

随机推荐

  1. hdu 5080 2014ACM/ICPC鞍山K题 polya计数

    首先,中心点是能够直接算出来的 把全部的坐标相加再除n就能够 然后枚举一个不靠近中心的点,枚举它绕中心点旋转的角度.仅仅要枚举50次就能够了 计算出当前枚举的的角度能否形成一个置换群 计算循环节,再用 ...

  2. C++11下的线程池以及灵活的functional + bind + lamda

    利用boost的thread实现一个线程类,维护一个任务队列,以便可以承载非常灵活的调用.这个线程类可以方便的为后面的线程池打好基础.线程池还是动态均衡,没有什么别的.由于minGW 4.7 对 C+ ...

  3. RMAN连接及简单操作

    一.RMAN的进入与退出 1.启动RMAN并连接到本地目标数据库 C:\Users\Administrator>set oracle_sid=orcl(如果只有一个实例,则不需要指定,RMAN会 ...

  4. <经验杂谈>C#/.Net字符串操作方法小结

    字符串操作是C#中最基本的.最常见的.也是用的最多的,以下我总结 了几种常见的方法 1.把字符串按照分隔符转换成 List /// <summary> /// 把字符串按照分隔符转换成 L ...

  5. 多余的Using Namespaces或引用会影响程序的执行效率么?(转)

    转自:http://www.cnblogs.com/Interkey/p/UsingNameSpace.html 多余的Using Namespaces或引用会影响程序的执行效率么? 在.NET程序编 ...

  6. javascript实现倒计时程序

    最近在网上看到一道这样的面试题: 题:  网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”? 我实现了,发现挺有意思,下面把我的代码贴出来 ...

  7. HDU 5903 - Square Distance [ DP ] ( BestCoder Round #87 1002 )

    题意: 给一个字符串t ,求与这个序列刚好有m个位置字符不同的由两个相同的串拼接起来的字符串 s, 要求字典序最小的答案    分析: 把字符串折半,分成0 - n/2-1 和 n/2 - n-1 d ...

  8. No1_8.类和对象2_Java学习笔记_对象

    对象 /**** * *一.对象 *1.概念:对象是由类抽象出来的,对象可以操作类的属性和方法解决问题,了解对象的创建.操作和消亡很必要: *2.对象的创建: * a. new操作符创建:每实例化一个 ...

  9. Strange Grid

    def main(): r,c = map(int, raw_input().split(' ')) if r % 2 != 0: base = 5*(r-1) else: base = 5*(r-2 ...

  10. Android Support Library package简介

    转自http://my.oschina.net/chengliqun/blog/148451 N久未做android了,以前做的时候,2.2才刚出来,现在android都更新到了4.3了,而从前一段时 ...