当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

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

发表于: 2013-02-01   作者:dcj3sjt126com   来源:转载   浏览次数:
摘要: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jQuery scrollEx
<!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 />

 

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

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
实现采用TabHost组件。 1、XML布局文件: <?xml version="1.0" encoding="utf-8"?> <TabHos
实现采用TabHost组件。 1、XML布局文件: <?xml version="1.0" encoding="utf-8"?> <TabHos
先看看效果: 1 aspx: Code <%@ Page Language="C#" AutoEventWireup<span style="color: #00
今天为了解决这个问题耗费了几个小时,现在记录下来,供大家参考。肯定有更好的方法,望不吝赐教!
首先建立数据库,数据关系图如下: 本文要实现的效果就是在评论别人文章时,如果文章内容过长或者评
这篇博客是参考helloandroid兄的腾讯微博应用,我整理了一下。完整项目的介绍请在http://helloandroi
这篇博客是参考helloandroid兄的腾讯微博应用,我整理了一下。完整项目的介绍请在http://helloandroi
现在有多个div,如果完全显示在一个页面里,显得太臃肿。故而需要分页,下面是我用jquery控制每页显
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告
如果大家使用iOS或者android相关移动平台的话,对于页面滑动到最底端后的弹跳效果肯定不会陌生,在
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号