js div 내용 표시 페이지

2166 단어 div
작업 수요 로 인하 여 
div 고정 크기 와 내용 이 일정 하지 않 기 때문에 내용 이 너무 많 으 면 자 연 스 럽 게 표시 되 지 않 기 때문에 페이지 를 나 누 는 기능 이 필요 합 니 다. 다음은 코드 입 니 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>  div         </title>

</head>



<body>

<div id="frameContent" style="width:605px;height:400px">

                  

</div>

              

<div id="pages" style="font-size:12px; width:605px; line-height:40px; text-align:center;">

         

</div>



<script language="javascript">

var obj = document.getElementById("frameContent");  //     

var pages = document.getElementById("pages");         //     

var pgindex=1;                                      //   

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> ";

//       

    }

 pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">   </a>  <a href=\"javascript:gotopage('1');\">   </a>"

}

function gotopage(value){

try{

 value=="-1"?showPage(pgindex-1):showPage(pgindex+1);

 }catch(e){

 

 }

}

function showPage(pageINdex)

{

    

 obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                  //    ,      

 pgindex=pageINdex;

}

</script>

</body>

</html>    


사실 div 의 디 스 플레이 높이 와 내용 높이 를 계산 하고 있 습 니 다. 총 몇 페이지 획득     표시 되 는 몇 페이지 는 픽 셀 부터 표시 되 는 것 일 뿐 입 니 다.

좋은 웹페이지 즐겨찾기