jQuery實現當拉動滾動條到底部加載數據


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實現當拉動滾動條到底部加載數據</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var totalheight = 0;//定義一個總的高度變量
$(window).scroll(function () {
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//瀏覽器的高度加上滾動條的高度
if ($(document).height() <= totalheight) //當文檔的高度小於或者等於總的高度的時候,開始動態加載數據
{
//加載數據
$("#container").append("我是新加載出來的數據<br/>我是新加載出來的數據<br/>我是新加載出來的數據<br/>我是新加載出來的數據<br/>我是新加載出來的數據<br/>我是新加載出來的數據<br/>");
}
});
</script>
</head>
<body>
<div id="container">
動態加載數據<br/>
動態加載數據<br/>
動態加載數據<br/>
動態加載數據<br/>
動態加載數據<br/>
動態加載數據<br/>
動態加載數據<br/>
動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>動態加載數據<br/>
</div>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM