js+css内容翻页
直接上代码<!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>
页:
[1]