这个例子是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(); // 调用定时请求方法 });