实现长文章HTML分页源码

最新推荐文章于 2024-07-05 06:58:12 发布

ccwwff

最新推荐文章于 2024-07-05 06:58:12 发布

阅读量7.3k

点赞数 1

分类专栏： 4.----WEB应用文章标签： html javascript function border 活动 2010

4.----WEB应用专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文在原文基础上经过验证调试，修改部分内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>文章分页特效</title>

#frameContent{

width:500px; /*调整显示区的宽*/

height:300px; /*调整显示区的高*/

font-size:18px;

line-height:30px;

border:0px solid #000000;

overflow-pageINdex:hidden;

overflow-y:hidden;

word-break:break-all;

}

font-size:18px;

color:#000000;

text-decoration:underline;

}

a:hover{

font-size:18px;

color:#CC0000;

text-decoration:underline;

}

p {

margin:0px;

padding:0px;

border:0px;

text-indent: 2em; //首行缩进

}

</style>

</head>

<body>

<p>北京奥运会颁奖礼仪服装共十六款。其中男装一款作为升旗手制服。女装十五款分为五个系列，每一系列分别按照嘉宾引导员、运动员引导员和托盘员的不同职能设计了三个不同款式。在奥运会的302场和残奥会的472场颁奖仪式上，这五个系列的礼服将分别出现在不同的场馆及比赛中。</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><p>（张宇）</p>

</div>

var obj = document.getElementById("frameContent"); //获取内容层

var pages = document.getElementById("pages"); //获取翻页层

var pgindex = 1; //当前页

var allpages = 1;

window.onload = function() //重写窗体加载的事件

{

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> ";

//循环输出第几页