页面动态数据的滚动效果——jquery滚动组件(vticker.js)
<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)的更多相关文章
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- 【微信小程序】模仿58同城页面制作以及动态数据加载
完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...
- Echarts基于动态数据初步使用 及问题 代码记录.
ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...
- jQuery实现浮动层跟随页面滚动效果
helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery 滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...
- 用jquery实现平滑的页面滚动效果
通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...
随机推荐
- hdu 5080 2014ACM/ICPC鞍山K题 polya计数
首先,中心点是能够直接算出来的 把全部的坐标相加再除n就能够 然后枚举一个不靠近中心的点,枚举它绕中心点旋转的角度.仅仅要枚举50次就能够了 计算出当前枚举的的角度能否形成一个置换群 计算循环节,再用 ...
- C++11下的线程池以及灵活的functional + bind + lamda
利用boost的thread实现一个线程类,维护一个任务队列,以便可以承载非常灵活的调用.这个线程类可以方便的为后面的线程池打好基础.线程池还是动态均衡,没有什么别的.由于minGW 4.7 对 C+ ...
- RMAN连接及简单操作
一.RMAN的进入与退出 1.启动RMAN并连接到本地目标数据库 C:\Users\Administrator>set oracle_sid=orcl(如果只有一个实例,则不需要指定,RMAN会 ...
- <经验杂谈>C#/.Net字符串操作方法小结
字符串操作是C#中最基本的.最常见的.也是用的最多的,以下我总结 了几种常见的方法 1.把字符串按照分隔符转换成 List /// <summary> /// 把字符串按照分隔符转换成 L ...
- 多余的Using Namespaces或引用会影响程序的执行效率么?(转)
转自:http://www.cnblogs.com/Interkey/p/UsingNameSpace.html 多余的Using Namespaces或引用会影响程序的执行效率么? 在.NET程序编 ...
- javascript实现倒计时程序
最近在网上看到一道这样的面试题: 题: 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”? 我实现了,发现挺有意思,下面把我的代码贴出来 ...
- HDU 5903 - Square Distance [ DP ] ( BestCoder Round #87 1002 )
题意: 给一个字符串t ,求与这个序列刚好有m个位置字符不同的由两个相同的串拼接起来的字符串 s, 要求字典序最小的答案 分析: 把字符串折半,分成0 - n/2-1 和 n/2 - n-1 d ...
- No1_8.类和对象2_Java学习笔记_对象
对象 /**** * *一.对象 *1.概念:对象是由类抽象出来的,对象可以操作类的属性和方法解决问题,了解对象的创建.操作和消亡很必要: *2.对象的创建: * a. new操作符创建:每实例化一个 ...
- Strange Grid
def main(): r,c = map(int, raw_input().split(' ')) if r % 2 != 0: base = 5*(r-1) else: base = 5*(r-2 ...
- Android Support Library package简介
转自http://my.oschina.net/chengliqun/blog/148451 N久未做android了,以前做的时候,2.2才刚出来,现在android都更新到了4.3了,而从前一段时 ...