上拉刷新

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.spinner {
margin: 100px auto 0;
150px;
text-align: center;
display: none;
}
.spinner > div {
10px;
height: 10px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
Prevent first frame from flickering when animation starts;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
/*.pullup{ 100%; height:30px; line-height:30px; color:#969696; font-size:16px; margin:10px 0;}*/
/*.pullup .loading-3{ margin:10px 5px 0 20px; float:left;}*/
/*.pullup .msg{ float:left}*/
/*.pullupcons{ 120px; margin:0 auto; height:30px;}*/

</style>
</head>
<body>
<div id="page" value=0></div>
<div class="qq" style="height: 1000px; 100%;">
<div class="list">
<ul class="listItem">
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
</div>
</div>
<div>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>

//查询锁
var wait = 0;
//下拉
$(window).scroll(function(){
if(wait==1){
return;
}
//滚动条到网页头部的高度，兼容ie,ff,chrome
var top = document.documentElement.scrollTop + document.body.scrollTop;
//网页的高度
var textheight = $(document).height();
// 网页高度-top-当前窗口高度
var topHeight =$(window).height();

if (textheight-top-topHeight<=40){
if(!($("#isend").length > 0)){
//加载数据
$(".spinner").show();
var page = $("#page").attr("value");
$("#page").attr("value",parseInt(page)+1);
wait=1;
setTimeout(function(){
wait=0;
$(".listItem").append("<li>"+ $("#page").attr("value")+"</li>");
var page =$("#page").attr("value");
$(".spinner").hide();
},2000)
// $.ajax({
// type: "POST",
// url: "",
// dataType: "html",
// data: {},
// success: function(res) {
// wait=0;
// $(".search_results_list ul li:last").after(res);
// }
// });
} else{
// $("#over").show();
// $(".msg,.loading-3").hide();
}
}
});

</script>
</body>
</html>