<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. 在CentOS 7上利用systemctl加入自己定义系统服务

    CentOS 7继承了RHEL 7的新的特性,比如强大的systemctl,而systemctl的使用也使得以往系统服务的/etc/init.d的启动脚本的方式就此改变,也大幅提高了系统服务的执行效率 ...

  2. 只包含schema的dll生成和引用方法

    工作中,所有的tools里有一个project是只包含若干个schema的工程,研究了一下,发现创建这种只包含schema的dll其实非常简单. 首先,在visual studio-new proje ...

  3. C# KeyValuePair<TKey,TValue>与Container

    KeyValuePair<TKey,TValue>  KeyValuePair<TKey,TValue>是一个结构体,相当于C#一个Map类型的对象,可以通过它记录一个键/值对 ...

  4. MS-SQL数据库备份方法

    一.手动备份 打开企业管理器 --> 右键点击需要备份的数据库 --> 所有任务 --> 备份数据库 或者: 查询分析器: use master  backup database 数 ...

  5. UIScrollView的属性

    属性 作用 CGPoint contentOffSet 监控目前滚动的位置 CGSize contentSize 滚动范围的大小 UIEdgeInsets contentInset 视图在scroll ...

  6. Jquery常用方法(转)

    原文:http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html jQuery是目前使用最广泛的javascript函数库.据 ...

  7. linux查看压缩包的文件列表

    网上看到了一篇文章: Using bzip2 with less 这篇文章介绍了一个脚本,脚本功能就是列出压缩包所压缩的文件,本文算是原文搬运,不过减少点东西以适用我日常系统运用. #!/bin/ba ...

  8. php中的MVC模式运用

    [size=5][color=Red]php中的MVC模式运用[/color][/size] 首先我来举个例子: 一个简单的文章显示系统 简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉 ...

  9. python中的 json 模块使用

    (1)python 中生成 json 字符串: import json data = dict(ret=0, msg="Welcome, Login success!") json ...

  10. C/C++与lua实现互调

    1,在lua脚本中调用C/C++代码中的函数 在C++中定义函数时必须以lua_State为参数, 以int为返回值才能被Lua所调用. /* typedef int (*lua_CFunction) ...