js分页显示div的内容

更新时间：2008年07月26日 12:51:28 作者：

对于div内容过高的情况，我们可以用js控制div分页

<!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:200px;                                     /*调整显示区的高*/     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>    </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>&nbsp;"; //循环输出第几页     }     pages.innerHTML += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js获取html参数及向swf传递参数应用介绍
HTML页面是在客户端执行的，这样要获取参数必须使用客户端脚本如JavaScript，在这点上与服务器端脚本获取参数方式有所不同接下来将详细介绍下感兴趣的你可不要错过了哈
2013-02-02
BootStrap 获得轮播中的索引和当前活动的焦点对象
这篇文章主要介绍了BootStrap 获得轮播中的索引和当前活动的焦点对象,本文给大家介绍的非常详细，需要的朋友可以参考下
2017-05-05
p5.js实现动态图形临摹
这篇文章主要为大家详细介绍了p5.js实现动态图形临摹，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
微信小程序用户后台定位及录音授权及请求示例
这篇文章主要为大家介绍了微信小程序用户后台定位及录音授权及请求示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
JS实现瀑布流效果
这篇文章主要为大家详细介绍了JS实现瀑布流效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
如何使用headjs来管理和异步加载js
本文主要介绍如何使用headjs来管理和异步加载js，提高页面的加载速度，需要的朋友可以参考下
2016-11-11
微信公众号服务器验证Token步骤图解
这篇文章主要介绍了微信公众号服务器验证Token步骤图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
教你巧用webpack在日志中记录文件行号
早期webpack的目的是允许在浏览器中运行大多数node.js模块,但是模块整体格局发生了变化,现在许多模块的主要用途是以编写前端为目的,下面这篇文章主要给大家介绍了关于巧用webpack在日志中记录文件行号的相关资料,需要的朋友可以参考下
2022-11-11
解决js ajax同步请求造成浏览器假死的问题
下面小编就为大家分享一篇解决js ajax同步请求造成浏览器假死的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
js实现canvas保存图片为png格式并下载到本地的方法
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法，非常具有实用价值，需要的朋友可以参考下
2017-08-08