<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. Java Builder模式 体验(二)

       在上篇文章中,对Java Builder模式的使用体验主要是从Builder对构造器改造方面的优秀特性来说的,感觉并没有从Java Builder模式本身的功能和作用去写,因此决定再从Build ...

  2. Test failed.尝试加载Oracle客户端库时引发BadImageFormatException

    CodeSmith6.5不像前几个版本,需要用户手动添加oracle驱动,内部已经集成了oracle的驱动. 网上遇到很多win7 64位机子使用CodeSmith连接oracle的时候出现错误如下:

  3. MySQL 一些小知识

    1. 关于多表查询 我的理解:由于MySQL多表查询时表之间的连接是笛卡尔积的方式,所以尽量少使用多表查询,如果使用则使用嵌套语句 例:说明: `tb_notice_message` 表数量百万级别以 ...

  4. Csharp 高级编程 C7.1.2

    第七章 代理(1) 一.代理要声明 二.代理使用步骤 声明代理 初始化代理(使用 实例的方法名 作为参数) 使用代理 代码示例: /*C7.1.2*/ using System; using Syst ...

  5. VS2010使用附加进程的方式调试IIS中的页面介绍

    1.       对要测试的页面设置断点,然后选择”调试”->”附加到进程”,在进程中选择w3wp.exe进程(需要先打开需测试的页面) 2.       配置完成,当打开你需要测试的页面的时候 ...

  6. sql server windows账号不能登陆指定的数据库

    问题描述: 1. windows账号登陆后,默认的数据库被删除 2. SA账号密码也忘记了 此时就会导致用windows账号登陆Sql Server的时候,返回4064的错误,按照上面的问题描述,应该 ...

  7. VPS,虚拟主机,云主机,独立服务器区别

    作者:张朝权链接:http://www.zhihu.com/question/25507629/answer/105594087来源:知乎著作权归作者所有,转载请联系作者获得授权.   独立服务器独立 ...

  8. web-打印

    项目前景 由于之前的打印是客户端程序,也就是winform做的,现在需要改版成网页版,其他功能都能够很好的实现,就是在打印上遇到一些难点.由于第一次做打印功能,刚开始照搬winform中调用word文 ...

  9. [QT]QT概述

    QT概述 基于C++的GUI开发框架,跨平台.Qt 是一个用于桌面系统和嵌入式开发的跨平台应用程序框架. QT是挪威TROLLTECH公司开发的跨平台C++工具,在UNIX下非常出名:他的宗旨是“一次 ...

  10. 转载:s:if的用法

    转载网址:http://blog.csdn.net/menhuanxiyou/article/details/5709550 1:直接写表达式 <s:set name="china&q ...