灵感缘自经典里面的静态页面分页效果。
我换了一种方式来完成静态页面翻页效果。
如果不喜欢有滚动条,可以在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+=(' <a href="##" onClick="javascript:_$page('+i+');">'+(i+1)+'</a>');}_$id("page").innerHTML=_s;}
//-->
</ script >
< body onload ="_$initpage();" >
< div id ="page" > </ 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 >
< 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+=(' <a href="##" onClick="javascript:_$page('+i+');">'+(i+1)+'</a>');}_$id("page").innerHTML=_s;}
//-->
</ script >
< body onload ="_$initpage();" >
< div id ="page" > </ 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 >