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 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
JavaScript 常用函数
Dec 30 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
JS实现一个简单的日历
Feb 22 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
在双python下设置python3为默认的方法
2018/10/31 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
利用python 下载bilibili视频
2020/11/13 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
高一自我鉴定
2013/12/17 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
二手房购房意向书范本
2014/04/01 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
教师工作态度自我评价
2015/03/05 职场文书
小学推普周活动总结
2015/05/07 职场文书
文艺演出主持词
2015/07/01 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python