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

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" onclick="document.getElementById(/''+contentDomId+'/').scrollTop='+i*maxCotentHeight+'">'+(1+i)+'</span>]&nbsp;&nbsp;';   }   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>