js+div控制新闻内容分页【转】

最新推荐文章于 2022-06-28 13:55:01 发布

keyunq

最新推荐文章于 2022-06-28 13:55:01 发布

阅读量2.3k

点赞数

分类专栏： ajax-javascript 文章标签： div javascript function xhtml html border

本文链接：https://blog.csdn.net/keyunq/article/details/3130348

版权

ajax-javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>div分页显示_脚本之家_www.jb51.net</title>
<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">
<p>
北京奥运会颁奖礼仪服装共十六款。其中男装一款作为升旗手制服。女装十五款分为五个系列，每一系列分别按照嘉宾引导员、运动员引导员和托盘员的不同职能设计了三个不同款式。在奥运会的302场和残奥会的472场颁奖仪式上，这五个系列的礼服将分别出现在不同的场馆及比赛中。 </p>


</div>

<div id="pages" style="font-size:12px;"></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));//获取页面数量

   if(allpages>1)
   {
       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>