`

js分长文章显示

阅读更多

  <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>&nbsp;  <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;
}

分享到:
评论

相关推荐

    纯JS长文章分页代码

    本代码提供了一个较为完整的纯JavaScript文章分页解决方案,涵盖了基本的参数配置、内容获取、分页处理以及简单的页面渲染逻辑。开发者可以根据具体需求对参数和功能进行调整和扩展,例如增加更多样式的导航按钮、...

    一个简单的JS实现的长文章分页

    标题 "一个简单的JS实现的长文章分页" 涉及到的是JavaScript编程中的一个常见功能,即在网页上处理大量文本内容时如何通过分页提高用户体验。在Web开发中,尤其是在内容丰富的博客、论坛或者新闻网站中,长篇文章...

    php+js显示更多文章

    在开发Web应用时,"php+js显示更多文章"是一个常见的功能,用于优化用户体验,避免一次性加载过多数据导致页面加载速度变慢。这个功能通常在文章列表或新闻滚动页面中出现,用户可以点击“加载更多”按钮来获取额外...

    JS实现各种动态显示隐藏div效果

    在JavaScript(JS)中,动态显示和隐藏div元素是网页交互设计中常用的技术,它可以提升用户体验,让网页更具活力。本文将深入探讨如何利用JS来实现卷动显示隐藏、渐变显示隐藏以及大小缩放显示隐藏的效果。 1. **...

    文章分页——js ,拿来就用

    标题中的“js 分页”表明我们将讨论JavaScript在文章分页上的应用。 首先,JavaScript代码的核心是将文章内容按照一定的规则进行分割,以便在不同的页面上展示。描述中的“一篇长的文章,你不想分页吗?”暗示了这...

    js+.net长文章分页----------C#.Net实例代码

    "js+.net长文章分页----------C#.Net实例代码"这个标题表明我们将讨论如何结合JavaScript(js)和.NET(C#)技术来实现一个长文章的分页功能。下面将详细介绍这个过程,并提供相关的C#代码示例。 分页通常涉及到...

    js菜鸟笔记之超长文章分页_ekom.cn

    文章标题为“js菜鸟笔记之超长文章分页”,表明这是一篇面向JavaScript初学者的技术笔记,主要探讨如何在网页上实现超长文章的分页功能。描述中提到该笔记仅供个人学习使用,并非商业性质,发布者为ekom.cn。 ### ...

    html+javascript只显示部分文章内容(一部分文字), 加载更多按钮 展开,收缩.zip

    在网页设计中,为了优化用户体验,我们经常遇到需要在页面上只显示文章部分内容,而其余内容则通过“加载更多”或“展开”按钮来获取。这个场景在标题和描述中被提及,涉及到的技术主要是HTML和JavaScript。下面我们...

    JS特效在文章中图片弹出动画.zip

    总的来说,"JS特效在文章中图片弹出动画"是一个典型的前端开发示例,它展示了如何使用JavaScript来增强网页的交互性和视觉效果。通过学习和理解这个项目,开发者可以进一步提升自己的JS技能,创造出更多富有创意和...

    js文章循环滚动,鼠标上移停止

    这个"js文章循环滚动,鼠标上移停止"的示例是利用JavaScript实现的一个交互式滚动功能,当鼠标指针悬停在滚动区域上方时,滚动会暂停;当鼠标移开时,滚动会继续。这种设计能提供更好的用户体验,用户可以方便地阅读...

    spreadjs_公式单元格显示公式数值切换-demo.zip

    本篇文章将围绕"spreadjs_公式单元格显示公式数值切换-demo"这一主题,深入探讨SpreadJS如何实现公式单元格的显示状态在公式和数值之间灵活切换,并通过分析提供的压缩包文件,解析其实现机制。 1. **SpreadJS 的...

    网页超长文章自动分页

    根据提供的信息,我们可以深入探讨网页超长文章自动分页的相关技术细节与实现方法。自动分页功能对于提高用户体验、优化页面加载性能具有重要意义。接下来,将详细解释如何在网页上实现这一功能,并涵盖相关的HTML、...

    用js实现静态网页中文章列表页的分页功能

    ### 使用JavaScript实现静态网页中的文章列表分页功能 在现代Web开发中,为了提升用户体验以及优化服务器资源,分页是一项非常实用的技术。特别是在处理大量数据时,如文章列表、产品目录等,通过分页可以避免一次...

    JS_模仿Flash交替图片显示

    【标题】"JS_模仿Flash交替图片显示"指的是使用JavaScript技术来实现类似Flash动画中图片轮播的效果。在Web开发中,这样的功能常用于创建滑动展示、广告轮播或图片画廊等交互式组件。JavaScript是一种轻量级的解释型...

    jQuery和css3侧边栏滑动显示相关文章插件

    **jQuery和CSS3侧边栏滑动显示相关文章插件详解** 在网页设计中,提供相关的文章推荐可以增强用户体验,帮助用户发现更多感兴趣的内容。这款jQuery和CSS3结合的侧边栏滑动显示相关文章插件就是为此目的而设计的。它...

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    这篇文章将详细介绍如何使用JavaScript实现这一功能。该功能通常用于登录或其他涉及输入密码的场景,使得用户能检查他们是否正确地输入了密码。 首先,实现这个功能需要两个关键元素:一个`&lt;input&gt;`标签用于密码...

    ASP长文章分页功能实现方法 手动 自动两种

    在处理长篇文章时,为了提高用户体验和加载速度,通常会采用分页技术将长篇文章分成多个部分显示。本文将详细介绍如何在ASP中实现手动和自动两种长文章分页功能。 **手动分页** 手动分页主要是通过编程逻辑来控制...

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    本文主要介绍了一种使用JavaScript(JS)和层叠样式表(CSS)相结合的方法,来实现鼠标感应的渐变显示和隐藏DIV层的效果。 首先,我们来理解一下核心的HTML结构。在这个例子中,我们有一个ID为"tip"的DIV元素,它是...

    JS+COOKIE+JSON记录用户浏览过的文章

    4. **读取和显示浏览历史**:当页面加载时,JavaScript可以读取Cookie中的JSON数据,使用JSON.parse()方法解析成数组,然后根据这个数组显示用户已读文章的列表。 综上所述,结合JavaScript、Cookie和JSON,我们...

Global site tag (gtag.js) - Google Analytics