jquery滚动组件(vticker.js)实现页面动态数据的滚动效果


Posted in Javascript onJuly 03, 2013
<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>
Javascript 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
JS去除右边逗号的简单方法
Jul 03 #Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 #Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 #Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 #Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 #Javascript
JS实现可改变列宽的table实例
Jul 02 #Javascript
js 图片随机不定向浮动的实现代码
Jul 02 #Javascript
You might like
php SQL防注入代码集合
2008/04/25 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
JS中setTimeout()的用法详解
2013/04/14 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python检测是文件还是目录的方法
2015/07/03 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
库房主管岗位职责
2013/12/31 职场文书
上学迟到的检讨书
2014/01/11 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
经验交流材料格式
2014/12/30 职场文书
消防宣传语大全
2015/07/13 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Python安装使用Scrapy框架
2022/04/12 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS