软件工具简介
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>滚动到页面顶部加载</title>
<script src=
"js/jquery-1.11.1.min.js"
type=
"text/javascript"
></script>
<script src=
"js/endlesspage.js"
type=
"text/javascript"
></script>
<style type=
"text/css"
>
.mainDiv {
width: 800px;
border: solid 1px
#f00;
padding: 10px;
}
.item {
width: 600px;
height: 50px;
border: solid 1px
#00ff90;
font-size: 12px;
margin: 10px;
}
.title {
font-size: 16px;
line-height: 20px;
}
.content {
line-height: 14px;
}
.alink
{
display:none;
}
.loaddiv
{
display:none;
}
</style>
</head>
<body>
<h1>滚动测试</h1>
<div class=
"mainDiv"
>
<!--<div class=
"item"
>
<div class=
"title"
>title</div>
<div class=
"content"
>content content content content content content content</div>
</div>
-->
</div>
<div class=
"loaddiv"
>
<img src=
"images/loading.gif"
/>
</div>
<div>
<a href=
"javascript:void(0);"
id=
"btn_Page"
class=
"alink"
>查看更多>>></a>
</div>
</body>
</html>
/*endlesspage.js*/
var
gPageSize = 10;
var
i = 1;
//设置当前页数,全局变量
$(
function
() {
//根据页数读取数据
function
getData(pagenumber) {
i++;
//页码自动增加,保证下次调用时为新的一页。
$.get(
"/ajax/Handler.ashx"
, { pagesize: gPageSize, pagenumber: pagenumber },
function
(data) {
if
(data.length > 0) {
var
jsonObj = JSON.parse(data);
insertDiv(jsonObj);
}
});
$.ajax({
type:
"post"
,
url:
"/ajax/Handler.ashx"
,
data: { pagesize: gPageSize, pagenumber: pagenumber },
dataType:
"json"
,
success:
function
(data) {
$(
".loaddiv"
).hide();
if
(data.length > 0) {
var
jsonObj = JSON.parse(data);
insertDiv(jsonObj);
}
},
beforeSend:
function
() {
$(
".loaddiv"
).show();
},
error:
function
() {
$(
".loaddiv"
).hide();
}
});
}
//初始化加载第一页数据
getData(1);
//生成数据html,append到div中
function
insertDiv(json) {
var
$mainDiv = $(
".mainDiv"
);
var
html =
''
;
for
(
var
i = 0; i < json.length; i++) {
html +=
'<div class="item">'
;
html +=
' <div class="title">'
+ json[i].rowId +
' '
+ json[i].D_Name +
'</div>'
;
html +=
' <div class="content">'
+ json[i].D_Name +
' '
+ json[i].D_Password +
'</div>'
;
html +=
'</div>'
;
}
$mainDiv.append(html);
}
//==============核心代码=============
var
winH = $(window).height();
//页面可视区域高度
var
scrollHandler =
function
() {
var
pageH = $(document.body).height();
var
scrollT = $(window).scrollTop();
//滚动条top
var
aa = (pageH - winH - scrollT) / winH;
if
(aa < 0.02) {
//0.02是个参数
if
(i % 10 === 0) {
//每10页做一次停顿!
getData(i);
$(window).unbind(
'scroll'
);
$(
"#btn_Page"
).show();
}
else
{
getData(i);
$(
"#btn_Page"
).hide();
}
}
}
//定义鼠标滚动事件
$(window).scroll(scrollHandler);
//==============核心代码=============
//继续加载按钮事件
$(
"#btn_Page"
).click(
function
() {
getData(i);
$(window).scroll(scrollHandler);
});
});
软件下载
软件名 | 下载地址 |
基于jquery实现页面滚动到底自动加载数据的功能 |