效果就是看百度图片的时候，滚动条拉到底部，将会出现动态刷新的图样。
已经做成了插件
下面是文件 jquery.bottomScrollLoading.js 中的代码
/**
* Created by ipqhjjybj on 14-3-7.
*/
;(function($){
var $bottomScrollLoading;
$.fn.bottomScrollLoading = function(settings){
return this.each(function(){
$bottomScrollLoading.init($(this), settings);
});
};
$bottomScrollLoading = $.bottomScrollLoading = {
init: function(outer, settings){
this.appendTo = settings.appendTo | $("body");
this.outer = outer; //这是滚动的视图
this.range = settings.range || -700; //距下边界长度/单位px
this.maxnum = settings.maxnum || 20; //设置加载最多次数
this.ajaxData = settings.ajaxData || {};
this.isLoading = false;
this.num = 1;
if (‘undefined‘ === typeof this.ajaxData.dataType || !$.inArray(this.ajaxData.dataType, (‘html‘, ‘json‘))) {
this.ajaxData.dataType = ‘html‘;
}
this.tmp_success = this.ajaxData.success;
this.ajaxData.success = function(ret){
sl = $bottomScrollLoading;
sl.isLoading = false;
$("#ipq_loading").remove();
if(‘function‘ === typeof sl.tmp_success){
sl.tmp_success(ret);
}
}
$(this.outer).scroll(function(){
var sl = $bottomScrollLoading;
var scrollPos = $(this).scrollTop();
var totalHeight = parseFloat($(sl.outer).height()) + parseFloat(scrollPos);
if( (false === sl.isLoading) && ( $(document).height()-sl.range) <= totalHeight && sl.num <= sl.maxnum){
sl.isLoading = true;
$("#content").append("<img id=‘ipq_loading‘ style=‘height: 60px; width: 60px; margin: 0 auto; margin-top: -60px; margin-left: 45%‘ src=‘http://www.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif‘>");
sl.sendRequest();
sl.num = sl.num + 1;
}
});
},
sendRequest:function(){
$.ajax(this.ajaxData);
}
}
})(jQuery);
/*
how to use it
$(window).bottomScrollLoading({
out:$(document),
ajaxData:{
url: "test5.html",
success:function(ret){
alert(ret);
$("#content").append("<div style=‘height: 500px;background-color: #FF0000;‘></div>");//如果想修改 loading的图片，请修改这里
}
}
});
*/
使用时加上头文件
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.bottomScrollLoading.js" type="text/javascript"></script>
之后加上代码
$(window).bottomScrollLoading({
out:$(document),
ajaxData:{
url: "test5.html",
success:function(ret){
//alert(ret);
$("#content").append("<div style=‘height: 500px;background-color: #FF0000;‘></div>");
}
}
});
<!DOCTYPE=html>
<html>
<head>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.bottomScrollLoading.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bottomScrollLoading({
out:$(document),
ajaxData:{
url: "test5.html", //就是ajax时用的地址
success:function(ret){
//alert(ret);
$("#content").append("<div style=‘height: 500px;background-color: #FF0000;‘></div>");
}
}
});
</script>
</head>
<body>
<div id="content" style="height:960px">
<div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
<div style=‘border:1px solid tomato;margin-top:20px;color:#ac1;height:800‘ >hello world test DIV</div>
</div>
</body>
</html>
制作这个插件的时候，参考了http://blog.csdn.net/saindy5828/article/details/7756315这里的代码
如果对加载时的loading图片不满意的。可以去修改 jquery.bottomScrollLoading.js 中的 $(body)附加的图片部分。。
第一次做jQuery插件。。
看来js水平进步了很多。。
附送一个demo.zip 来演示
demo