拖動滾動條實現網頁內容自動載入程式碼例項
本章節分享一段程式碼例項,它實現了向下拖動滾動條,能夠自動載入網頁內容的功能。
這種效果在很多網站都有應用,當然它們載入的內容都是從資料庫讀取的,下面的演示自然不能從資料庫讀取內容,不過原理大致如此,實際應用的時候只要和後臺人員配合一下就可以實現了。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #antzone{ border:1px solid tomato; margin-top:20px; color:#ac1; height:800 } </style> <script src="http://libs.baidu.com/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">頁面下拉自動載入內容</div> <div id="antzone">螞蟻部落歡迎您</div> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).var range = 50,規定距離下邊界還有多少距離就要載入內容。
(3).var elemt = 500,插入元素的高度。
(4).var maxnum = 20,最多可以載入的數目。
(5).var num = 1,宣告一個變數並賦初值為1,用來表示載入元素的次序。
(6).var totalheight = 0,後面會用到,用來儲存一個高度。
(7).var main = $("#content"),獲取指定的元素jquery物件。
(8).$(window).scroll(function(){}),為window物件註冊scroll事件處理函式。
(9).var srollPos = $(window).scrollTop(),獲取瀏覽器向上滾動的尺寸。
(10).totalheight = parseFloat($(window).height()) + parseFloat(srollPos),獲取客戶瀏覽器客戶區高度和向上滾動的高度之和。
(11).if(($(document).height()-range) <= totalheight && num != maxnum),判斷瀏覽器距離地段是不是小於等於range,並且沒有達到最大數目,那麼就執行新增元素的操作。
二.相關閱讀:
(1).scroll事件可以參閱jQuery scroll 事件一章節。
(2).scrollTop()方法可以參閱jQuery scrollTop()一章節。
(3).parseFloat()方法可以參閱javascript parseFloat()一章節。
(4).append()方法可以參閱jQuery append()一章節。
相關文章
- 拖動滾動條實現內容自動載入效果
- 拖動滾動條載入資料程式碼例項
- 拖動滾動條實現div跟隨效果程式碼例項
- 表格拖動滾動條標題固定程式碼例項
- 網頁內容部分設滾動條網頁
- 動態修改網頁title內容程式碼例項網頁
- javascript模擬實現滾動條效果程式碼例項JavaScript
- css實現隱藏滾動條並可以滾動內容CSS
- 美化滾動條效果程式碼例項
- js下拉滾動條瀑布流載入資料程式碼例項JS
- css隱藏滾動條程式碼例項CSS
- 網頁title標題滾動效果程式碼例項網頁
- js實現的div拖動效果例項程式碼JS
- 3種方法實現CSS隱藏滾動條並可以滾動內容CSS
- 拖動滾動條實現側欄導航定位效果
- js獲取滾動條高度例項程式碼JS
- 滑鼠拖動實現將div放入方格例項程式碼
- 頁面全屏垂直平滑滾動程式碼例項
- PHP+InfiniteScroll網頁無限滾動載入資料例項PHP網頁
- js實現 web頁面的滾動條下拉時載入更多JSWeb
- js實現的文字垂直滾動例項程式碼JS
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- 實現網頁標題跳動效果程式碼例項網頁
- 實現js檔案動態載入程式碼例項JS
- jQuery根據滾動條位置載入相應的內容jQuery
- 實現動態自動匹配輸入的內容
- jQuerydiv元素拖動效果程式碼例項jQuery
- 移動端div塊拖動效果程式碼例項
- js實現的網頁標題閃動程式碼例項JS網頁
- 帶有滾動條的全屏遮罩層程式碼例項遮罩
- SVG拖動繪製矩形程式碼例項SVG
- 可以拖動的div塊程式碼例項
- 旋轉等待內容載入完畢實現程式碼例項
- 線上直播系統原始碼,實現翻頁載入、下拉滾動載入原始碼
- jQuery實現的動態載入指令碼檔案程式碼例項jQuery指令碼
- javascript實現的動態載入css檔案程式碼例項JavaScriptCSS
- 微信小程式實現滾動載入更多微信小程式
- js實現的文字框輸入內容自動提示效果程式碼JS