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

最新推荐文章于 2023-09-01 13:15:20 发布

jiuai455

最新推荐文章于 2023-09-01 13:15:20 发布

阅读量1.3k

点赞数

本文介绍了一个使用 jQuery 的 scrollExtend 插件的示例，该插件能够实现当用户滚动到指定位置时自动加载新内容的功能。示例中详细展示了如何设置滚动触发条件、目标元素及新内容的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首页的代码如下：代码

<!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>

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