拖動(dòng)滾動(dòng)條實(shí)現(xiàn)網(wǎng)頁內(nèi)容自動(dòng)加載代碼實(shí)例
本章節(jié)分享一段代碼實(shí)例，它實(shí)現(xiàn)了向下拖動(dòng)滾動(dòng)條，能夠自動(dòng)加載網(wǎng)頁內(nèi)容的功能。
這種效果在很多網(wǎng)站都有應(yīng)用，當(dāng)然它們加載的內(nèi)容都是從數(shù)據(jù)庫讀取的，下面的演示自然不能從數(shù)據(jù)庫讀取內(nèi)容，不過原理大致如此，實(shí)際應(yīng)用的時(shí)候只要和后臺(tái)人員配合一下就可以實(shí)現(xiàn)了。
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var range = 50;
var elemt = 500;
var maxnum = 20;
var num = 1;
var totalheight = 0;
var main = $("#content");
$(window).scroll(function(){
var srollPos = $(window).scrollTop();
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if(($(document).height()-range) <= totalheight && num != maxnum) {
main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"
+(num%20)+(num%20)+";height:"+elemt+"px' >hello world"+srollPos+"---"+num+"</div>");
num++;
}
});
});
</script>
</head>
<body>
<div id="content" style="height:960px">
<div id="follow">頁面下拉自動(dòng)加載內(nèi)容</div>
<div id="antzone"></div>
</div>
</body>
</html>上面的代碼實(shí)現(xiàn)了我們的要求，下面介紹一下它的實(shí)現(xiàn)過程。
一.代碼注釋:
（1）.$(document).ready(function(){})，當(dāng)文檔結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。
（2）.var range = 50，規(guī)定距離下邊界還有多少距離就要加載內(nèi)容。
（3）.var elemt = 500，插入元素的高度。
（4）.var maxnum = 20，最多可以加載的數(shù)目。
（5）.var num = 1，聲明一個(gè)變量并賦初值為1，用來表示加載元素的次序。
（6）.var totalheight = 0，后面會(huì)用到，用來存儲(chǔ)一個(gè)高度。
（7）.var main = $("#content")，獲取指定的元素jquery對(duì)象。
（8）.$(window).scroll(function(){})，為window對(duì)象注冊(cè)scroll事件處理函數(shù)。
（9）.var srollPos = $(window).scrollTop()，獲取瀏覽器向上滾動(dòng)的尺寸。
（10）.totalheight = parseFloat($(window).height()) + parseFloat(srollPos)，獲取客戶瀏覽器客戶區(qū)高度和向上滾動(dòng)的高度之和。
（11）.if(($(document).height()-range) <= totalheight && num != maxnum)，判斷瀏覽器距離地段是不是小于等于range，并且沒有達(dá)到最大數(shù)目，那么就執(zhí)行添加元素的操作。
二.
（1）.scroll事件可以參閱jQuery scroll 事件一章節(jié)。
（2）.scrollTop()方法可以參閱jQuery scrollTop()一章節(jié)。
（3）.parseFloat()方法可以參閱javascript parseFloat()一章節(jié)。
（4）.append()方法可以參閱jQuery append()一章節(jié)。
相關(guān)推薦
-
js解析xml文件簡(jiǎn)單代碼實(shí)例
下面分享兩個(gè)代碼片段，它們都實(shí)現(xiàn)了對(duì)XML文件的解析效果。（1）.原生jvscrit:vr xmlDoc = rqust.rsonsXML;try // Build Mrkrs,
-
jquery判斷<img>圖片是否加載完成代碼實(shí)例
使用jqury實(shí)現(xiàn)此功能非常的簡(jiǎn)單，直接看代碼實(shí)例:$(function(){ $(.ntzon).ch(function() { $(this).lod(function(){
-
zblog檢查并閉合html代碼中的各種未閉合的成對(duì)標(biāo)簽
zblog檢查并閉合html代碼中的各種未閉合的成對(duì)標(biāo)簽
-
zblog翻頁組件完整代碼
zblog翻頁組件完整代碼
-
zblog分類頁展示子分類內(nèi)容
zblog分類頁展示子分類內(nèi)容
帝國(guó)CMS模板博客文章資訊自適應(yīng)手機(jī)HTML5網(wǎng)站SEO優(yōu)化版
2023-12-26 14:39:32
美文句子文章網(wǎng)站模板自適應(yīng)作文百科資訊源碼
2023-12-22 17:46:01
帝國(guó)CMS模板個(gè)人博客美文佳句文章資訊自適應(yīng)手機(jī)網(wǎng)站源碼
2023-12-19 18:01:32
帝國(guó)cms簡(jiǎn)潔兩端資訊文章句子網(wǎng)美文源碼詩句模板
2023-12-13 10:58:14
帝國(guó)cms大氣簡(jiǎn)潔資訊文章博客源碼電商資訊教程網(wǎng)站模板
2023-11-30 13:56:14
