<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. 在Unity中使用Shader

    1.Material 和 Shader 的关系.一个材质包括一个Shader程序.在Shader中设置的属性能够通过Material可视化设置 2.内建Shader,在5.0之后的版本号中大部分旧的S ...

  2. OLE操作Excel编译错误处理

      Excel在公司用的很多,而这个东西我用的不是很好,就想用程序来处理,遇到很多错误.这几天研究了下OLE操作Excel.环境:VS2008 SP1+Excel 2007 加入OLE Type Li ...

  3. LoadRunner监控windows资源报错Monitor name :Windows Resources. Cannot connect to machine

    目标机:被监控的机器,windows server 2008 R2. 测试机:执行control的机器,windows7 操作:在测试机上执行Control,添加windows的监控 问题现象:Mon ...

  4. docke 网络配置

    一,docker 的bridge模式是和vmware中的nat模式类似的,但是如果想要弄成和vmwae中的bridge怎么办呢? 说明,bridge模式获取的Ip是与宿主机的ip是出于同一个网段的. ...

  5. javascript之求最值

    求最值: var selections = $("#deliveryGridSalesOrGoods").datagrid('getRows'); var costPrice = ...

  6. for循环和经典案例

    循环:初始条件,循环条件,状态改变,循环体.for(初始条件;循环条件;状态改变){ 循环体}for(int i=1;i<=10;i++){ }例子:100以内与7有关的数.求100以内所有数的 ...

  7. iOS中UISearchBar(搜索框)使用总结

    http://my.oschina.net/u/2340880/blog/509756

  8. iOS_SN_Socket - AsyncSocket

    转载文章,原地址:http://yimouleng.com/2015/02/04/Socket-AsyncSocket/ 一.前言 公司的项目用到了Socket编程,之前在学习的过程当中,用到的更多的 ...

  9. lightOJ1370 欧拉函数性质

    D - (例题)欧拉函数性质 Crawling in process... Crawling failed Time Limit:2000MS     Memory Limit:32768KB     ...

  10. C# txt文件读写

    //读取文件内容 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出. ]; ]; public void Read() { try { FileStream fil ...