用層實現長篇文章分頁(用“scrollHeight”獲得垂直滾動條的高度,用此值除以div層的高度,取整後就是總的頁數。當用戶查看某頁時,便調用“showPage”方法,實現翻頁效果。)

<html>

<head>

<style type="text/css">

#frameContent{

    width:500px;                                      /*調整顯示區的寬*/

    height:200px;                                     /*調整顯示區的高*/

    font-size:14px;

    line-height:20px;

    border:1px solid #000000;

    overflow-pageINdex:hidden;

    overflow-y:hidden;

    word-break:break-all;

}

a{

    font-size:12px;

    color:#000000;

    text-decoration:underline;

}

a:hover{

    font-size:12px;

    color:#CC0000;

    text-decoration:underline;

}

</style>

</head>

<body>

<div id="frameContent">

     在這裏輸入你的文章

</div>

<P>

<div id="pages" style="font-size:12px;"></div>

<script language="javascript">

var obj = document.getElementById("frameContent");  //獲取內容層

var pages = document.getElementById("pages");         //獲取翻頁層

window.onload = function()                             //重寫窗體加載的事件

{

    var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//獲取頁面數量

    pages.innerHTML = "<b>共"+allpages+"頁</b>";     //輸出頁面數量

    for (var i=1;i<=allpages;i++){

        pages.innerHTML += "<a href=/"javascript:showPage('"+i+"');/">第"+i+"頁</a>&nbsp;";

//循環輸出第幾頁

    }

}

function showPage(pageINdex)

{

    obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                     //根據高度,輸出指定的頁

}

</script>

</body>

</html>


這個對無編輯器的內容分頁來說,我覺得蠻不錯的。

最後一頁會出問題,會有重複內容




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章