根据滚动条自动加载内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条自动加载</title>
</head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" >
$(function(){
$(window).bind("scroll",winScroll); ??
});
/**
滚动条加载事件
*/
var t=11;
var docHeigth=0;
function winScroll(){
//"滚动条自动加 -->"+$(window).height()
?
var scrollTop=$(window).scrollTop();
var docHeigth=$(document).height();
if(docHeigth-scrollTop<=1000){
if(t<100){
for(var i=0;i<10;i++){
var dd=document.createElement('div');
$(dd).attr("id","div_inner_"+t);
$(dd).css("width",1000);
$(dd).css("height",200);
$(dd).css("border","1px solid #cc66e8");
$(dd).css("margin-top",10);
$(dd).css("margin-bottom",10);
$(dd).css("margin-left","auto");
$(dd).css("margin-right","auto");
$(dd).css("text-align","left");
$(dd).html("div_inner_"+t);
$(dd).appendTo($('#div_outer'));
t++;
}
}
//$(window).scrollTop(scrollTop);
}
//"滚动条自动加 -->"+$(window).height()
document.title=$(document).height()+"--"+scrollTop;
}
</script>
<body>
<div id="div_outer" style="width:1024px; border:1px solid #99bbe8; margin: 10px auto; text-align:center;">
<div id="div_inner_1" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_1
? ? ? ? </div>
? ? ? ? <div id="div_inner_2" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_2
? ? ? ? </div>
? ? ? ? <div id="div_inner_3" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_3
? ? ? ? </div>
? ? ? ? <div id="div_inner_4" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_4
? ? ? ? </div>
? ? ? ? <div id="div_inner_5" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_5
? ? ? ? </div>
? ? ? ? <div id="div_inner_6" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_6
? ? ? ? </div>
? ? ? ? <div id="div_inner_7" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_7
? ? ? ? </div>
? ? ? ? ? <div id="div_inner_8" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_8
? ? ? ? </div>
? ? ? ? ? <div id="div_inner_9" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_9
? ? ? ? </div>
? ? ? ? ? <div id="div_inner_10" style="width:1000px; height:200px; border:1px solid #cc66e8; margin:10px auto; text-align:left;">
? ? ? ? div_inner_10
? ? ? ? </div>
</div>
</body>
</html>
