js分长文章显示

最新推荐文章于 2022-04-13 15:03:10 发布

erpzhuce

最新推荐文章于 2022-04-13 15:03:10 发布

阅读量88

点赞数

分类专栏： javascript+jquery 文章标签： JavaScript ASP CSS ViewUI

javascript+jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

  <div id="frameContent">
   <asp:Label ID="lbcontent" runat="server"></asp:Label>
   </div>
   <div id="pages" style="font-size:12px;"></div>
            <script language="javascript">
            var obj = document.getElementById("frameContent"); //获取内容层
            var pages = document.getElementById("pages");         //获取翻页层
            var pgindex=1;                                      //当前页
            window.onload = function()                             //重写窗体加载的事件
            {
                var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//获取页面数量

                if(allpages>1)
                {
                    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)
            {

                obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                  //根据高度，输出指定的页
                pgindex=pageINdex;
            }
            </script>

css代码：

#frameContent{
    width:510px;
    text-align:left;
    padding:3px;                                   /*调整显示区的宽*/
    height:500px;                                     /*调整显示区的高*/
    font-size:14px;
    line-height:20px;
    border:1px solid #fff;
    overflow-pageINdex:hidden;
    overflow-y:hidden;
    word-break:break-all;
    margin-top:0px;
}