<!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实现瀑布流滚动加载分页效果，利用jquery下拉分页，上拉加载，下拉分页
jQuery全屏页面滚动效果页面上下滚动效果代码jq插件
JQuery实现动态滚动菜单效果 JQuery实现动态滚动菜单效果 JQuery实现动态滚动菜单效果
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
jquery实现的带有分页效果的仿google的自动补齐效果
jquery实现数据动态加载分页的完整版,不错哦，欢迎下载
页面滚动到底部自动加载数据功能模拟，HTML5+Jquery，需要的下载看一下
jquery实现的等待加载页面 即实现更好的用户交互效果
一款非常大气的全屏网站切换特效，点击顶部固定导航菜单链接自动切换到对应内容的jQuery全屏页面滚动导航切换效果。
Jquery实现简单的滚动刷新效果： 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文： <form id="form1" runat="server"> </form> Javascript操作代码： $(document)....
使用jquerymobile移动框架，利用jquery的ajax滚动加载内容。
jQuery实现列表自动滚动循环滚动展示新闻，鼠标悬停时停止滚动并提示，离开后，继续滚动，实现的代码如下，需要的朋友可以看看
jQuery懒加载插件页面滚动加载数据代码 jQuery懒加载插件页面滚动加载数据代码
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
jquerymobile实现拖动分页加载页面功
使用jquerymobile移动框架，利用jquery的ajax滚动加载内容。
我们在天猫商城下拉滚动条时，“宝贝详情”、“交易详情”等一排按钮会一直出现在浏览器顶部，方便我们切换导航。
类似于：www.mingdao.com首页的滚动切换，鼠标滚轮上下滑动的时候，页面显示切换效果