码迷,mamicode.com
首页 > Web开发 > 详细

js对文章内容进行分页示例代码

时间:2015-08-27 18:07:42      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下

Thinkphp中文章显示代码: 

代码如下:

<div id="showContent">{$article.content|htmlspecialchars_decode}</div> 
<div id="articlePages"></div> 

  


js实现代码: 

代码如下:

<script type="text/javascript"> 
var obj = document.getElementById("showContent"); 
var pages= document.getElementById("articlePages"); 
//alert(obj.scrollHeight); 
window.onload= function() 
{ 
var all=Math.ceil(parseInt(obj.scrollHeight)/ parseInt(obj.offsetHeight)); 
//获取总页数,主要是应用scrollHeight 
pages.innerHTML="共"+ all +"页"; 
for(var i=1; i<=all;i++) 
{ 
pages.innerHTML +=" <a href=\javascript:showPage(‘"+i+"‘);> "+i+"</a> "; 
//输出所有页码 
} 
} 
function showPage(pageIndex) 
{ 
obj.scrollTop = (pageIndex-1)* parseInt(obj.offsetHeight); 
} 
</script> 

  


css代码: 

代码如下:

#showContent { 
color:black; 
font-size: 16px; 
height: 700px; 
overflow: hidden; 
} 
#articlePages { 
text-align: right; 
} 

  

js对文章内容进行分页示例代码

标签:

原文地址:http://www.cnblogs.com/good10000/p/4763787.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!