js+css内容翻页

最新推荐文章于 2024-05-05 06:38:54 发布

xuganggogo

最新推荐文章于 2024-05-05 06:38:54 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS JavaScript XHTML HTML ViewUI

本文链接：https://blog.youkuaiyun.com/xuganggogo/article/details/83441163

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用纯JavaScript和HTML实现的简单网页分页效果。通过动态调整内容区域的高度和滚动位置，可以轻松地在长内容中实现平滑的翻页体验。文章提供了完整的代码示例，并解释了关键函数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

<!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>