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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
vue.js路由跳转详解
Aug 28 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
google广告之另类js调用实现代码
Aug 22 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
javascript根据像素点取位置示例
2014/01/27 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python版大富翁源代码分享
2018/11/19 Python
python将list转为matrix的方法
2018/12/12 Python
python解析含有重复key的json方法
2019/01/22 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
毕业生文员求职信
2013/11/03 职场文书
运动会入场解说词
2014/02/07 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
解除施工合同协议书
2014/10/17 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
行政助理岗位职责
2015/02/10 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
python opencv旋转图片的使用方法
2021/06/04 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis