js+css实现翻页

最新推荐文章于 2011-06-21 19:31:00 发布

fhjzgsy

最新推荐文章于 2011-06-21 19:31:00 发布

阅读量566

点赞数

分类专栏： asp.net实用总结文章标签： css javascript function xhtml html border

本文链接：https://blog.csdn.net/fhjzgsy/article/details/5148656

版权

asp.net实用总结专栏收录该内容

49 篇文章 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>无标题文档</title>
</head><body>

<div id="frameContent">
写上你要分页的东西！
</div>
<p>
</p><div id="pages" style="font-size: 12px;"></div>
<script language="javascript">
var obj = document.getElementById("frameContent"); //获取内容层
var pages = document.getElementById("pages"); //获取翻页层
var pgindex=1;                                 //当前页
var lastPage = 1 ;                             //最后一页
var offsetHeight_ys = parseInt(obj.offsetHeight) ;
window.onload = function() //重写窗体加载的事件
{
     //alert("parseInt(obj.scrollHeight)="+parseInt(obj.scrollHeight));
     //alert("parseInt(obj.offsetHeight)="+parseInt(obj.offsetHeight));
      var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));//获取页面数量
     lastPage = allpages ;
     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)
{
alert("pageINdex="+pageINdex);
if( pageINdex > lastPage){
     //alert("超过最大值");
    obj.style.height = "200px" ; //这里200px与css中的height:200px一样
    pageINdex = lastPage
}else if( pageINdex < 1){
     pageINdex = 1 ;
}
var temp = parseInt(obj.offsetHeight) ;
//当遮挡长度+显示长度> 总的长度，即翻到最后一页，就会出现问题，以下是一种解决方法。
if( (pageINdex-1)*parseInt(obj.offsetHeight) + 202 > parseInt(obj.scrollHeight)){
     //alert("当遮挡长度+显示长度> 总的长度");
    obj.style.height = (parseInt(obj.scrollHeight) - (pageINdex-1)*parseInt(obj.offsetHeight) )+"px" ;
     //根据高度,输出指定的页,这个高度必须保持为一个值,(obj.offsetHeight)会因为obj.style.height改变而改变.所以这里用temp先取到输出的高度.
    obj.scrollTop=(pageINdex-1)*temp ;
}else{
    obj.style.height = "200px" ;//这里200px与css中的height:200px一样
    obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight) ; //根据高度，输出指定的页
}
pgindex= parseInt(pageINdex);   //转换成int，否则页数相加的时候容易变成字符串相加
}
</script>
<style type="text/css">
#frameContent{
width:500px; /*调整显示区的宽*/
height:200px; /*调整显示区的高*/
line-height:20px;
border:1px solid #000000;
overflow-pageINdex:hidden;
overflow-y:hidden;
word-break:break-all;
}

</style>
</body></html>

fhjzgsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+css实现翻页

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">> 无标题文档写上你要分页的东西！ var obj = document.getElementById("frameContent"); //获取内容层
复制链接

扫一扫