静态页面翻页效果

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

我换了一种方式来完成静态页面翻页效果。
如果不喜欢有滚动条,可以在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 >

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值