JQuery加载列表实现动画滚动(自上而下挤)
这个例子是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(); // 调用定时请求方法
});
JQuery加载列表实现动画滚动(自上而下挤)的更多相关文章
- jquery实现移动端页面加载后,向上滚动指定距离无效引起的探索
效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错, 也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- Tree:加载列表数据
Tree控件,需要提供一个树形的JSON数据,才能正常显示. 通常,开发者在后台可以这样做: 1)从数据库查询出一个列表数据 2)在后台,将列表数据转换为树形数据 3)通过JSON方式返回 在前台页面 ...
- jQuery加载一个html页面到指定的div里
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
- 使用jQuery加载html页面到指定的div
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
- jquery加载页面的方法
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
随机推荐
- gaea-basic-components 知识点
github:https://github.com/ascoders/gaea-basic-components
- Zookeeper 三台主机 Ha集群的搭建
前期准备1.修改Linux主机名 2.修改IP 3.修改主机名和IP的映射关系 /etc/hosts ######注意######如果你们公司是租用的服务器或是使用的云主机(如华为用主机.阿里云主机等 ...
- Hadoop yarn工作流程详解
yarn是什么?1.它是一个资源调度及提供作业运行的系统环境平台 资源:cpu.mem等 作业:map task.reduce Task yarn产生背景?它是从hadoop2.x版本才引入1.had ...
- CentOS 6.5 下源码搭建LAMP环境
参考网站: http://wenku.baidu.com/link?url=Cvkqss2E9mnxXOZigMWPaCfqwsBxnm0sZ4aKE2oLAgQ888XxeC0DWOChxVqiHz ...
- 禁止用键盘左右箭头,去切换PageControl页签
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- DS树+图综合练习--构建邻接表
题目描述 已知一有向图,构建该图对应的邻接表.邻接表包含数组和单链表两种数据结构,其中每个数组元素也是单链表的头结点,数组元素包含两个属性,属性一是顶点编号info,属性二是指针域next指向与它相连 ...
- C/C++基础--模板与泛型编程
模板参数 函数模板,编译器根据实参来为我们推断模板实参. 模板中可以定义非类型参数,表示一个值而非一个类型,这些值必须是常量表达式,从而允许编译器在编译时实例化模板. 非类型参数可以是整型,或者一个指 ...
- Hadoop概念学习系列之再谈hadoop集群里的本地模式、伪分布模式和全分布模式(三十七)
能看懂博主我此博文,相信你已经有了一定基础了. 对于本地模式.伪分布模式和全分布模式的概念,这里,我不多赘述.太多资料和博客,随便在网上一搜就好. 比如<hadoop实战 第二版>陆嘉恒老 ...
- Redis单线程单进程为什么效率那么高
1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1): 2.数据结构简单,对数据操作也简单,Red ...
- JVM异常之:直接内存溢出
示例: package com.dxz.jvm; import java.lang.reflect.Field; import sun.misc.Unsafe; /** * @Described:直接 ...