jquery实现页面滚动到最下方自动按分页的形式加载内容效果

来源：互联网发布：整型变量的数据范围编辑：程序博客网时间：2024/05/01 04:45

首页的代码如下：代码复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery scrollExtend demo</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollExtend.js"></script>
<style type="text/css">
div {
margin-left: auto;
margin-right: auto;
}
div.scroll_body {
width: 500px;
border: 1px solid #CCCCCC;
text-align: center;
}
div.list_item {
height: 200px;
margin-bottom: 5px;
width: 90%;
border: 1px solid #999999;
}
div.more_content {
height: 100px;
width: 500px;
border: 1px solid blue;
}
div.scrollExtend-loading {
height: 20px;
background-image:url('images/loading-bars.gif');
background-position: center center;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery('.scroll_body').scrollExtend( //此处的 scroll_body 是滚动的元素，就是在这个区域滚动会触发事件来加载新的内容
{
'target': 'div#scroll_items', //这个是目标应该添加到的窗口是哪个，此处为 div的ID为scroll_items的div,新加的内容会追加到此元素内部的最后面
'url': 'get_content.html', //此处为需要调用的内容，可以为api接口，直接调用，然后那个页面可以分别用分页的方式显示数据
'newElementClass': 'list_item more_content' //此处为新元素的class样式，此处为 list_item 和 more_content , 新加的元素是带一个div的
}
);
}
);
</script>
</head>
<body>
<div class="scroll_body">
<div id="scroll_items">
<div class="list_item">
[ List Item 2 ]
</div>
<div class="list_item">
[ List Item 2 ]
</div> <div class="list_item">
[ List Item 2 ]
</div>
</div>
</div>
<div style="clear:both;"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>  <head>   <title>jQuery scrollExtend demo</title>   <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>   <script type="text/javascript" src="js/jquery.scrollExtend.js"></script>   <style type="text/css">    div {margin-left: auto;margin-right: auto;}div.scroll_body {width: 500px;border: 1px solid #CCCCCC;text-align: center;}div.list_item {height: 200px;margin-bottom: 5px;width: 90%;border: 1px solid #999999;}div.more_content {height: 100px;width: 500px;border: 1px solid blue;}div.scrollExtend-loading {height: 20px;background-image:url('images/loading-bars.gif');background-position: center center;background-repeat: no-repeat;}   </style>   <script type="text/javascript">jQuery(document).ready(function() {jQuery('.scroll_body').scrollExtend(//此处的 scroll_body 是滚动的元素，就是在这个区域滚动会触发事件来加载新的内容{'target': 'div#scroll_items',//这个是目标应该添加到的窗口是哪个，此处为 div的ID为scroll_items的div,新加的内容会追加到此元素内部的最后面'url': 'get_content.html',//此处为需要调用的内容，可以为api接口，直接调用，然后那个页面可以分别用分页的方式显示数据'newElementClass': 'list_item more_content'//此处为新元素的class样式，此处为 list_item 和 more_content , 新加的元素是带一个div的});});   </script>  </head>  <body>  <div class="scroll_body">     <div id="scroll_items">        <div class="list_item">        [ List Item 2 ]     </div>        <div class="list_item">        [ List Item 2 ]     </div>        <div class="list_item">        [ List Item 2 ]     </div>      </div>  </div>    <div style="clear:both;"></div>  </body></html>

得到内容的页面代码如下：代码复制代码

new content! <br />

new content! <br />

上传了压缩包，里面有注释，内容很简单，希望能帮助朋友提高更多的效率