静态页面翻页效果

灵感缘自经典里面的静态页面分页效果。

我换了一种方式来完成静态页面翻页效果。
如果不喜欢有滚动条，可以在CSS里面拿掉。
我个人偏向这种翻页效果，即使客户屏蔽了js，还是能够完整浏览 。
兼容 IE/FireFox/Opera.  Safari 没测试。

效果：  http://gaofan.com/gf/pages.html

 

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title > Pages </ title >
< meta  name ="Generator"  content ="EditPlus" >
< meta  name ="Author"  content ="gaofan" >
< meta  name ="Keywords"  content ="" >
< meta  name ="Description"  content ="" >
< meta  http-equiv ="Pragma"  content ="no-cache" >
< meta  http-equiv ="Cache-Control"  content ="no-cache" >
< meta  http-equiv ="Expires"  content ="0" >
</ head >
< style > ...   
* {...}{font-size:10.2pt;font-family:tahoma;line-height:20px;}
#page{...}{ width: 400px; height:20px; border:1px solid #FFF280; background-color:#FFFFCC; padding: 0px; margin: 0px;  }  
#content{...}{ width: 400px; height:297px; border:1px solid #FF0000; background-color:#FFD2D3;overflow:auto; padding: 0px; margin: 0px;  } 
</ style >
< script  language ="JavaScript"  type ="text/javascript" > ...
<!--
    var _offset = 0;
    function _$id(_obj)...{return document.getElementById(_obj);}     
    function _$page(_i)...{_$id("content").scrollTop = (_$id("content").clientHeight*_i);}
    function _$initpage()...{var _s=''; _offset = _$id("content").clientHeight;var _top = _$id("content").scrollTop ; for(var i=0;i<(_$id("content").scrollHeight/_offset);i++)...{_s+=('&nbsp;&nbsp;&nbsp;&nbsp;<a href="##"  onClick="javascript:_$page('+i+');">'+(i+1)+'</a>');}_$id("page").innerHTML=_s;}
//--> 
</ script >
< body  onload ="_$initpage();" >
< div  id ="page" > &nbsp;&nbsp; </ div >  
< div  id ="content" >
     < p > 女老师竭力向孩子们证明，学习好功课的重要性。  </ p >< p > 她说：“牛顿坐在树下，眼睛盯着树在思考， < TABLE  cellpadding =4  cellspacing =1  width =200  bgcolor =#336633 >< TR  bgcolor =#ffffff >      < TD > a </ TD ></ TR >< TR  bgcolor =#ffffff >      < TD > b </ TD ></ TR >< TR  bgcolor =#ffffff >      < TD > c </ TD ></ TR >< TR  bgcolor =#ffffff >      < TD > d </ TD ></ TR ></ TABLE > 这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”  </ p >< p > “班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，他说：“兴许是这样，可是，假如他坐  </ p >< p > “班上一个调皮鬼对此并不满意。 < img  src ="200608110134298128869_min.jpg"   width =100  height =96  border =0 /> 他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”  </ p >< p > 女老师竭力向孩子们证明，学习好功课的重要性。  </ p >< p > 她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”  </ p >< p > “班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”  </ p >< p > 女老师竭力向孩子们证明，学习好功课的重要性。  </ p >< p > 她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”  </ p >< p > “班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”  </ p >< p > 女老师竭力向孩子们证明，学习好功课的重要性。  </ p >< p > 她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。”  </ p >< p > “班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。”  </ p >
</ div >
</ body >
</ html >