`
jslfl
  • 浏览: 323689 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js内容分页

    博客分类:
  • web
阅读更多
找到一段实用代码,好用!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div分页显示_脚本之家_www.jb51.net</title>
<style type="text/css">
#frameContent{
    width:500px;                                      /*调整显示区的宽*/
    height:400px;                                     /*调整显示区的高*/
    font-size:14px;
    line-height:20px;
    border:1px solid #000000;
    overflow-pageINdex:hidden;
    overflow-y:hidden;
    word-break:break-all;
}
a{
    font-size:12px;
    color:#000000;
    text-decoration:underline;
}
a:hover{
    font-size:12px;
    color:#CC0000;
    text-decoration:underline;
}
</style>
</head>
<body>
<div id="frameContent">
  <p>北京奥运会颁奖礼仪服装共十六款。其中男装一款作为升旗手制服。女装十五款分为五个系列,每一系列分别按照嘉宾引导员、运动员引导员和托盘员的不同职能设计了三个不同款式。在奥运会的302场和残奥会的472场颁奖仪式上,这五个系列的礼服将分别出现在不同的场馆及比赛中。</p>
  <p>  "青花瓷"系列使用在国家游泳中心水立方、顺义水上公园和青岛等所有水上项目的颁奖仪式中。 </p>
  <table cellspacing="0" cellpadding="0" align="left" border="0">
    <tbody>
      <tr>
        <td valign="top"></td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
  设计灵感取自世界闻名的中国青花瓷器。中国传统乱针绣的运用形象逼真地再现了青花瓷的晕染效果。鱼尾裙的廓形设计凸显了中国女性的柔美曲线。
  </p>
  <p>  宝蓝系列使用在体操、室内球类比赛和击剑等项目的颁奖现场。服装采用温润典雅的宝蓝色作为礼服主色,腰间饰有采用传统盘金绣制作的腰封,图案选用最具中国传统文化审美意趣和美好愿望的吉祥纹样——江山海牙纹、牡丹花纹,凸显了鲜明的中国特色和民族风格。同时也向全世界人民展示了中国最高超的刺绣工艺。中式的立领配以西式的肩部设计尽现中国女性落落大方的高贵气质。</p>
  <p>  国槐绿系列丝缎礼服使用在自行车、射击、现代五项等项目的颁奖仪式上。礼服寓意蓬勃朝气的生命和郁郁葱葱的环境,体现了与自然和谐发展的美好愿望及坚守"绿色奥运"的决心。立体银线绣制的吉祥牡丹和契合女性柔美曲线的卷曲花纹,更显身段的婀娜多姿和东方女性的恬静气质。</p>
  <p>  "玉脂白"系列将出现在国家体育场、所有的室外球类比赛以及香港马术比赛中。它巧妙地呼应了奥运奖牌金镶玉的理念,彩绣腰封和玉佩的设计,既是中国玉文化的完美再现又是对传统旗袍设计的一次创新。层次丰富的绿色与牙白色丝绸面料的质感完美搭配,更突出了中国女性内敛、含蓄的特质。</p>
  <p>  粉红色系列主要出现在拳击、举重、摔跤等力量型比赛中,以传统盘金绣工艺制作的宝相花图案腰饰,分割出完美的人体比例。领部的设计突出了颈部的优美线条,同时以粉色的柔美来中和比赛的阳刚之气。</p>
  <p>  升旗手服装与青花瓷礼服遥相呼应,在体现中国传统文化的同时又不失阳刚之气,将出现在所有的奥运会和残奥会比赛场馆中。</p>
  <p>  所有的奥运礼服和升旗手制服都绣有"Beijing 2008"的字样。</p>
  <p>  "十分具有中国文化特色"是国际奥委会对这些服装的第一评价。2007年5月23日,由北京奥组委主办、中国服装设计师协会和北京市工业促进局协办的北京奥运会颁奖礼仪服装设计征集活动启动后,共收到有效作品305份,包括服装成衣137套、效果图168份。投稿作品中包括全国"十佳"设计师投稿127份,服装设计专业院校投稿80份。</p>
  <p>  2007年8月2日—3日,经过初评和复评。由北京奥组委领导、中国艺术及服装设计界专家、国际奥委会形象景观专家及冠军运动员代表组成的评审小组共选出成衣作品30件,包括托盘员礼服8件、嘉宾引导员礼服7件、运动员引导员礼服10件、升旗手制服5件。2007年8月至2008年2月,北京奥组委组织专家召开了十余次方案修改研讨会。入围设计师在专家组的指导下多次修改方案、制作样衣。并先后于2007年11月8日和08年2月3日两次上报北京奥组委执委会审议。最终方案于2008年2月底通过国际奥委会审批。(张宇)</p>
  <!--                  ..STYLE1 {color: #000000;font-weight: bold;font-size: 14px;}                  ..STYLE4 {color: #000000}                  ..STYLE5 {color: #000000; font-weight: bold;}                  ..STYLE6 {color: #000000}-->
</div>
<P>
<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));//获取页面数量
    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>
</body>
</html>
分享到:
评论

相关推荐

    js文件内容分页的例子

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,尤其在处理页面交互和动态内容方面表现出色。在大型数据展示或者长篇文章阅读时,为了提高用户体验,通常会采用内容分页的方式来组织...

    js分页控件--js封装的分页控件

    自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.

    js真假分页示例

    "js真假分页示例"是关于如何使用JavaScript(特别是jQuery)实现无刷新分页的一个教程。这种技术允许用户在不重新加载整个页面的情况下浏览多页内容,提高用户体验并减少服务器负担。 "真假分页"的概念在前端开发中...

    js javascript js控制分页打印,打印分页

    在JavaScript(JS)中,控制分页打印是一个常见的需求,特别是在网页开发中。这涉及到将大量数据分成可管理的小块,以便用户可以逐页查看和打印。本文将深入探讨JavaScript如何实现这一功能,并结合标签“源码”和...

    js分页示例,前台分页,客户端分页,分页机制,js分页

    JavaScript分页是网页开发中一个常见且重要的功能,主要用于处理大量数据时的显示优化,避免一次性加载过多内容导致页面响应速度变慢或者消耗过多的网络资源。本篇将深入探讨JavaScript实现分页的相关知识点,包括...

    文本文件js分页

    这个技术主要是利用JavaScript(简称JS)来实现网页上的文章内容分页显示,提高用户体验并优化网页性能。 首先,我们要理解什么是分页。分页是一种将大量数据分为多个较小部分的方法,每个部分通常称为一页。在网页...

    利用js制作html table分页示例(js实现分页)

    描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...

    10种 js web分页效果

    JavaScript(简称JS)是Web开发中的重要组成部分,用于实现丰富的交互性和动态效果。在Web页面中,当数据量过大时,为了提高用户体验和加载速度,通常会采用分页技术来展示内容。本教程将深入探讨10种不同的JS Web...

    JS+HTML分页代码

    本示例提供的"JS+HTML分页代码"是一个利用JavaScript(JS)和超文本标记语言(HTML)实现的分页功能,主要包含了首页、前页、后页、尾页以及自定义分页页号的功能。 **HTML基础**: HTML是网页的基础,用于构建页面...

    分页js文件

    在这个主题中,我们将深入探讨"分页js"的相关知识点,包括分页的基本原理、JavaScript实现分页的方法、以及如何结合CSS(如`pageNav.css`)优化分页的样式。 首先,我们要理解分页的基本概念。分页通常用于显示...

    纯js分页-用js实现分页显示

    纯js分页,用js将内容以分页的形式展现出来,处理数据更简单

    js分页javascript分页

    2. Pagination.js:一个独立的JavaScript分页库,支持自定义分页样式,支持Ajax请求数据。 3. vue-paginate:针对Vue.js框架的分页组件,易用且高度可定制。 4. react-pagination:适用于React应用的分页组件,可与...

    js分页功能 js分页功能

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,包括实现动态内容、用户交互、页面行为控制等。在大型数据展示或者列表展示时,为了提高用户体验,通常会采用分页功能来将大量数据分块...

    内容分页代码 jS+c#|jAVA

    在JavaScript中,你可以使用AJAX(异步JavaScript和XML)来动态加载分页内容。AJAX允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。以下是一个简单的JavaScript分页示例: ```javascript ...

    js实现分页效果

    二、基本的JavaScript分页实现 1. 创建HTML结构:构建分页的HTML元素,通常包括页码列表、上一页/下一页按钮等。 ```html 上一页 &lt;span id="currentPage"&gt;1 下一页 &lt;ul id="pageNumbers"&gt;&lt;/ul&gt; ``` 2. ...

    js分页效果

    总的来说,"js分页效果"是一个综合性的前端开发任务,涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例,开发者不仅可以学习到分页的实现技巧,还能加深对前端开发整体流程的...

    Js 静态分页 10种风格

    静态分页,虽然名字中有“静态”一词,但在Js中,它实际上是指在不重新加载整个页面的情况下,通过JavaScript代码来更新页面内容,显示不同的数据分页。以下是关于Js静态分页的10种风格及其相关知识点的详细介绍: ...

    js自动分页table.zip

    1. **JavaScript分页组件**:JavaScript(简称JS)是一种轻量级的解释型编程语言,常用于网页动态效果的处理。在这个项目中,JS被用来创建一个自动分页组件,该组件能够根据数据量自动进行分页操作,提高页面加载...

    纯js实现分页 可跳转指定页

    通过上述步骤,我们可以构建一个灵活、可自定义的JavaScript分页插件,它不仅能满足基本的分页需求,还能根据用户的交互进行指定页的跳转,同时提供丰富的样式定制选项。在实际开发中,这样的插件可以帮助我们高效地...

    js分页代码,分页代码

    **生成分页内容** - 根据当前页和每页长度计算出应该显示的内容片段。 - 示例代码中并没有完整地展示这部分逻辑,但一般的做法是计算出起始索引和结束索引,然后截取相应的内容片段显示。 #### 4. **生成分页...

Global site tag (gtag.js) - Google Analytics