杭州设计公司,杭州广告设计公司
网页设计
CSS+JS实现的静态页面分页效果
信息来源:未知     栏目类别: 网页设计     浏览次数:     发表评论 减小字体 增大字体
&**bsp;&**bsp; 一般来说,在网站原来的基础上实行全站html化,的确有很多问题摆在大家面前。例如,如何给以前的内容生产html,如何给生产的html内容实行分页

&**bsp;&**bsp;&**bsp; 在这里提供2种方法,如果您有更好的方法,请指教。

&**bsp;&**bsp;&**bsp; 一种采用split方法。

&**bsp;&**bsp;&**bsp; 此方法可以使用刚准备做静态页面的网站。具体方法:在添加内容的时候加上[**extPage]标志,意思是文章到此为下一页,然后再生产html的时候用split函数分页。代码如下:

&**bsp;&**bsp;&**bsp; i**fos=split(i**fo,"[NextPage]")&**bsp;&**bsp;&**bsp;&**bsp; '意思是以[**extpage]为分割标志来分割内容

&**bsp;&**bsp;&**bsp; 其他的代码我就不写了,原理就是这样。

&**bsp;&**bsp;&**bsp; 二种采用js+css方法。

&**bsp;&**bsp;&**bsp;&**bsp;

以下是引用片段:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra**sitio**al//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra**sitio**al.dtd" target="_bla**k">http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra**sitio**al.dtd</a>">
<html xml**s="<a href="http://www.w3.org/1999/xhtml" target="_bla**k">http://www.w3.org/1999/xhtml</a>" la**g="gb2312">
<head>
<title>CSS+JS实现的静态页面翻页效果</title>
<style type="text/css">
* {
&**bsp;fo**t : **ormal 12px/1.5em "Microsoft YaHei", Tahoma;
&**bsp;_fo**t : **ormal 12px/1.5em Tahoma; /* CSS Hack For IE6 */
&**bsp;border: 0px;
&**bsp;margi**: 0px;
&**bsp;paddi**g: 0px;
&**bsp;overflow: hidde**;
&**bsp;text-decoratio**: **o**e;
&**bsp;*text-overflow: ellipsis; /* CSS Hack For IE7 & IE6 */
}
a {
&**bsp;color: #333;
}
a :li**k{
&**bsp;color: #333;
}
a:active{color:#FF6600}
a:hover {
&**bsp;color: #06c;
&**bsp;
}
body {
&**bsp;backgrou**d: #f3faff;
&**bsp;text-alig**: ce**ter;
}
ul {
&**bsp;list-style-type: **o**e;
}
li {
&**bsp;margi**-bottom: 13px; /* CSS Hack For Firefox */
&**bsp;*margi**-bottom: 12px; /* CSS Hack For IE7 & IE6 */
&**bsp;_margi**-bottom: 3%; /* CSS Hack For IE6 */
&**bsp;white-space: **owrap;
}
#Mai**_News {
&**bsp;/*backgrou**d-color: teal;*/
&**bsp;border: 1px #acd0f0 solid;
&**bsp;width: 445px;
&**bsp;height: 402px;
}
#Co**te**t {
&**bsp;width: 425px;
&**bsp;height: 372px;
&**bsp;margi**: 10px 10px 0px 10px;
&**bsp;_margi**: 10px 5px 0px 5px; /* CSS Hack For IE6 */
&**bsp;overflow: hidde**;
&**bsp;text-alig**: left;
}
#Pages {
&**bsp;width: 445px;
&**bsp;height: 20px;
&**bsp;margi**: 0px;
&**bsp;text-alig**: right;
}
#Pages a:li**k{color:#000000}
#Pages a:hover{color:#FF0000}
#Pages a:active{color:#3300FF}
</style>
<script defer="defer" la**guage="javascript" type="text/javascript">
<!--
&**bsp;var _offset = 0;
&**bsp;fu**ctio** _$id(_obj) {
&**bsp;&**bsp;retur** docume**t.getEleme**tById(_obj);
&**bsp;}
&**bsp;fu**ctio** _$Pages(_i) {
&**bsp;&**bsp;_$id("Co**te**t").scrollTop = (_$id("Co**te**t").clie**tHeight*_i);
&**bsp;&**bsp;for (var i=0;i<(_$id("Co**te**t").scrollHeight/_offset);i++)
&**bsp;&**bsp;{
&**bsp;&**bsp;&**bsp;
&**bsp;&**bsp;&**bsp;if (i==_i)
&**bsp;&**bsp;&**bsp;&**bsp;_$id("soojs_"+(_i+1)).style.backgrou**dColor="#ff9900";
&**bsp;&**bsp;&**bsp;else
&**bsp;&**bsp;&**bsp;&**bsp;_$id("soojs_"+(i+1)).style.backgrou**dColor="";
&**bsp;&**bsp;}
&**bsp;}
&**bsp;fu**ctio** _$I**itPages() {
&**bsp;&**bsp;var _s='';
&**bsp;&**bsp;_offset = _$id("Co**te**t").clie**tHeight;
&**bsp;&**bsp;var _top = _$id("Co**te**t").scrollTop;
&**bsp;&**bsp;for (var i=0;i<(_$id("Co**te**t").scrollHeight/_offset);i++) {
&**bsp;&**bsp;&**bsp;_s+=('<a href="javascript:void(0);" o**click="javascript:_$Pages('+i+');" o**focus="this.blur()" title="Page&**bsp;'+(i+1)+'" id="soojs_'+(i+1)+'">'+"&**bsp;"+(i+1)+"&**bsp;"+'</a>&**bsp;&**bsp;&**bsp;&**bsp;');
&**bsp;&**bsp;}
&**bsp;&**bsp;_$id("Pages").i****erHTML=_s;
&**bsp;}
//-->
</script>
</head>
<body o**load="_$I**itPages();" >
&**bsp;&**bsp;<div id="Mai**_News"><!--主要新闻-->
&**bsp;&**bsp;&**bsp;<div id="Co**te**t">
&**bsp;&**bsp;&**bsp;&**bsp;<ul>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><spa** class="type">[图文]</spa**>科研处关于科研成果登记的通知</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><spa** class="type">[图文]</spa**>关于清除炒股聊天等软件的通知</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><spa** class="type">[图文]</spa**>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知1</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知2</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知3</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知4</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知5</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知6</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知7</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知8</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知9</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知10</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知11</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知12</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知13</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知14</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知15</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知16</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知17</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知18</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知19</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知20</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知21</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知22</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知23</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知24</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知25</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知26</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知27</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知28</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>科研处关于科研成果登记的通知29</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于清除炒股聊天等软件的通知30</li>
&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
&**bsp;&**bsp;&**bsp;&**bsp;</ul>
&**bsp;&**bsp;&**bsp;</div>
&**bsp;&**bsp;&**bsp;<div id="Pages"></div>
&**bsp;&**bsp;</div>
</body>
</html>

本文标签:分页把本文收藏到 网摘 博采 百度
上一篇:利用模板asp生成html列表分页          回网页设计列表         下一篇:生成html静态文件后的分页
搜索本站其他内容: 百度一下:[CSS+JS实现的静态页面分页效果]   Google搜索:[CSS+JS实现的静态页面分页效果]
最新网友评论文章↓
1.靠2009-11-19 20:42:45
2.去2009-11-19 20:39:41
3.脑残还是变相炫富?2009-11-16 20:17:58
4.好感动哦2009-11-7 15:40:32
5.怎么学习2009-10-20 10:54:50

文章添加时间:2008-10-15,文件大小:20.33 KB,最近更新时间:2011-12-16 18:09:05 返回TOP↑            

本站文章搜集自网络;共享网络,共享快乐,我为人人,人人为我;如果您知道本站未知来源文章请告知本站谢谢!
文中及留言观点不代表本站;本站转载内容只是为了更好的交流;
若侵犯了您的版权请联系E-mail:有事儿,您Q我!,本站核实后立即处理!

  •             平面设计| 标志设计| 包装设计| 网页设计| 广告设计| VI设计| 画册设计| 专卖店设计| 展位设计| 名片设计| 网站地图|    建议使用IE5及以上1024*768分辨率
  •             友情链接 版权所有 © 杭州威迪广告公司 2008-2010 | TEL:0571-88385993 13296756810 浙ICP备09011107号