这个例子是jquery动态加载列表，并通过定时刷新，实现其循环滚动效果的一个例子。
1、HTML代码：
<div class="fake-table">
<li class="fake-table-hr">
<span>姓名</span>
<span>地点</span>
<span>联系方式</span>
</li>
<div class="table-wrap">
<ul id="J_Table">
</ul>
</div>
</div>
2、CSS代码：
.fake-table {
position: relative;
height: 140px;
font-size: 14px;
list-style: none;
}
.table-wrap {
height: 120px;
overflow: hidden;
}
.table-wrap ul {
position: rerlative;
}
.fake-table li {
width: 500px;
height: 20px;
margin: 0 auto;
line-height: 20px;
border: 1px solid #0B519D;
background-color: rgba(24, 65, 157, 0.25);
border-top: none;
}
.fake-table li.fake-table-hr {
height: 20px;
line-height: 20px;
background: url(images/table-tr.png) no-repeat;
border: none;
font-weight: bold;
}
.fake-table li span {
float: left;
height: 20px;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
3、JS代码：
<script type="text/javascript">
$(function(){
// 定义要加载的数据
var data = [{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
}
]; /**
* renderTableData（循环数组加载列表方法）
* @param [Array] data（要加载的数组）
*/
function renderTableData(data) {
var len = data.lenght;
var lineHeight = 20; // 每行li的行高
var infoWrap = $('#J_Table');
var htmlArr = [];
var item = '';
for (var i = 0; i < len; i++) {
item = '<li>'
+ '<span>' + data[i]['name'] + '</span>'
+ '<span>' + data[i]['address'] + '</span>'
+ '<span>' + data[i]['contact'] + '</span>'
+ '</li>';
htmlArr.push(item);
} infoWrap.prepend(htmlArr.join('')); // 将htmlArr数组添加到页面元素中 infoWrap.css({
'top': - len * lineHeight + 'px'; // 设置（负每行行高*数组长度）的top值，将加载列表定位到显示区域上方（即隐藏）
}).animate({
'top': '0px' // 设置top值为0,即加载列表整个展示出来
}, 1000, 'swing', function() { // 设置间隔为1000，动画效果为"swing"（有"swing"和"linear"两种）
$('li:gt(' + (len - 1) + ')', infoWrap).remove(); // 将原先的元素内容移除
});
} /**
*timlyRenderData （定时请求的方法）
*
*/
function timlyRenderData() {
if(this.clearTimlyId) { // 如果定时请求存在，则清除
clearInterval(this.clearTimlyId);
}
this.clearTimlyId = setInterval(function() { // 创建定时请求
renderTableData(data);
}, 5000);
} renderTableData(data); //调用该方法 timlyRenderData(); // 调用定时请求方法
});