使用javascript对长内容的文章进行分页.

最新推荐文章于 2020-08-26 15:10:16 发布

bahuanwa5356

最新推荐文章于 2020-08-26 15:10:16 发布

阅读量204

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Iamlein/archive/2008/05/29/2375940.html

版权

JS:

function divideContent(contentDomId,linkDomId){ var maxCotentHeight = 600; var lineheight = parseInt(document.getElementById(contentDomId).style.lineHeight); maxCotentHeight = Math.ceil(maxCotentHeight/lineheight)*lineheight; document.getElementById(contentDomId).style.height = ""; var contentHeight = document.getElementById(contentDomId).scrollHeight; if(contentHeight>maxCotentHeight){ document.getElementById(contentDomId).style.height = maxCotentHeight+"px"; }

//下面解决了一个bug:最后一页总是满的,自动补充空白给最后一页 if(contentHeight%maxCotentHeight!=0&&contentHeight>maxCotentHeight){ var extraHieght = maxCotentHeight - contentHeight%maxCotentHeight; var extraHTML='<div style="height:'+extraHieght+'px; width:100%"></div>'; document.getElementById(contentDomId).innerHTML+=extraHTML; } var pageCount = Math.ceil(contentHeight/maxCotentHeight); if(pageCount>1){ var linkhtml = ""; for(var i=0;i<pageCount;i++){ linkhtml += '[<span style="cursor:pointer;text-decoration:underline;color:blue; font-weight:bold" οnclick="document.getElementById(/''+contentDomId+'/').scrollTop='+i*maxCotentHeight+'">'+(1+i)+'</span>]  '; } document.getElementById(linkDomId).innerHTML = linkhtml; } document.getElementById(contentDomId).style.overflow = 'hidden'; document.getElementById(contentDomId).style.display = 'block'; document.getElementById(contentDomId).style.visibility = 'visible'; document.getElementById(contentDomId).scrollTop = 0; }

HTML:

<div id="articlecontent" style="line-height:16px; height:592px; overflow:hidden;"> {$article.html} </div> <div id="articlecontentlink" style="line-height:16px;" align="center"> </div>

转载于:https://www.cnblogs.com/Iamlein/archive/2008/05/29/2375940.html