jquery實(shí)現(xiàn)html頁(yè)面 div 假分頁(yè)有原理有代碼
div假分頁(yè)原理:填充后div的總高度 (1000px) 顯示高度(100px) 則頁(yè)面總數(shù)為10頁(yè) 。當(dāng)查看第二頁(yè)時(shí),顯示的div高度為100 - 200之間,以此類推
看見(jiàn)頁(yè)面在翻頁(yè) 實(shí)則為div滾動(dòng)條移動(dòng)。
<div id="applications">顯示數(shù)據(jù)集合</div>
<style> #applications { /* width:500px;調(diào)整顯示區(qū)的寬*/ height: 1592px; /*調(diào)整顯示區(qū)的高*/ font-size: 14px; margin-top:23px; line-height: 20px; overflow-pageindex: hidden; overflow-y: hidden; word-break: break-all; } </style>
<script language="javascript"> var obj = document.getElementById("applications"); //獲取內(nèi)容層 var pages = document.getElementById("pages"); //獲取翻頁(yè)層 window.onload = function ()//重寫窗體加載的事件 { var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //獲取頁(yè)面數(shù)量 // pages.innerHTML = "<b>共" + allpages-1+ "頁(yè)</b> "; //輸出頁(yè)面數(shù)量 for (var i = 1; i <= allpages; i++) { if (i == 1) { pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">首頁(yè)</a> "; } else{ pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">" + i + "</a> "; } //循環(huán)輸出第幾頁(yè) } } function showPage(pageINdex) { obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //根據(jù)高度,輸出指定的頁(yè) } </script>
動(dòng)態(tài)數(shù)據(jù)分頁(yè)時(shí),尾頁(yè)不夠分頁(yè)條數(shù),需填充具體高度,不然分頁(yè)會(huì)把上一頁(yè)的數(shù)據(jù)重復(fù)顯示在最后一頁(yè)中。
相關(guān)文章
jQuery live( type, fn ) 委派事件實(shí)現(xiàn)
jQuery 1.3中新增的方法。給所有當(dāng)前以及將來(lái)會(huì)匹配的元素綁定一個(gè)事件處理函數(shù)(比如click事件)。也能綁定自定義事件。2009-10-10jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法,涉及針對(duì)表單提交時(shí)的判斷方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12jQuery ajax的功能實(shí)現(xiàn)方法詳解
jQuery的ajax方法非常好用,這么好的東西,你想擁有一個(gè)屬于自己的ajax么?接下來(lái),我們來(lái)自己做一個(gè)簡(jiǎn)單的ajax吧2017-01-01基于jquery的手風(fēng)琴圖片展示效果實(shí)現(xiàn)方法
這篇文章主要介紹了基于jquery的手風(fēng)琴圖片展示效果實(shí)現(xiàn)方法,涉及jQuery基于事件實(shí)現(xiàn)改變css樣式的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12jQuery 淡入淡出、展開(kāi)收縮菜單實(shí)現(xiàn)代碼
jQuery淡入淡出、展開(kāi)收縮菜單2009-12-12jquery利用event.which方法獲取鍵盤輸入值的代碼
jquery利用event.which方法獲取鍵盤輸入值的代碼,需要的朋友可以參考下。2011-10-10