很漂亮js+css实现静态页面分页显示效果,点击页码后在当前网页切换页面内容显示,根据自己的需求来修改即可。
<html> <head> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>js+css实现静态页分页显示特效_武鸣人</title> <style type="text/css"> * { font : normal 12px/1.5em "Microsoft YaHei", Tahoma; _font : normal 12px/1.5em Tahoma; /* CSS Hack For IE6 */ border: 0px; margin: 0px; padding: 0px; overflow: hidden; text-decoration: none; *text-overflow: ellipsis; /* CSS Hack For IE7 & IE6 */ } a { color: #333; } a :link{ color: #333; } a:active{color:#FF6600} a:hover { color: #06c; } body { background: #f3faff; text-align: center; } ul { list-style-type: none; } li { margin-bottom: 13px; /* CSS Hack For Firefox */ *margin-bottom: 12px; /* CSS Hack For IE7 & IE6 */ _margin-bottom: 3%; /* CSS Hack For IE6 */ white-space: nowrap; } #new_wuming_ren { /*background-color: teal;*/ border: 1px #acd0f0 solid; width: 445px; height: 402px; } #Content { width: 425px; height: 372px; margin: 10px 10px 0px 10px; _margin: 10px 5px 0px 5px; /* CSS Hack For IE6 */ overflow: hidden; text-align: left; } #wwwwumingren_page { width: 445px; height: 20px; margin: 0px; text-align: right; } #wwwwumingren_page a:link{color:#000000} #wwwwumingren_page a:hover{color:#FF0000} #wwwwumingren_page a:active{color:#3300FF} </style> <script type="text/javascript"> <!-- var _offset = 0; function _$id(_obj) { return document.getElementById(_obj); }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) function _$Pages(_i) { _$id("Content").scrollTop = (_$id("Content").clientHeight*_i); for (var i=0;i<(_$id("Content").scrollHeight/_offset);i++) { if (i==_i) _$id("soojs_"+(_i+1)).style.backgroundColor="#ff9900"; else _$id("soojs_"+(i+1)).style.backgroundColor=""; } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) function _$init_wuming_ren() { var _s=''; _offset = _$id("Content").clientHeight; var _top = _$id("Content").scrollTop; for (var i=0;i<(_$id("Content").scrollHeight/_offset);i++) { _s+=('<a href="javascript:void(0);" onclick="javascript:_$Pages('+i+');" onfocus="this.blur()" title="Page '+(i+1)+'" id="soojs_'+(i+1)+'">'+" "+(i+1)+" "+'</a> '); } _$id("wwwwumingren_page").innerHTML=_s; _$id("soojs_"+1).style.backgroundColor="#ff9900"; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) //--> </script> </head> <body onload="_$init_wuming_ren();" > <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div id="new_wuming_ren"> <div id="Content"> <ul> <li><span class="type">[图文]</span>科研处关于科研成果登记的通知</li> <li><span class="type">[图文]</span>关于清除炒股聊天等软件的通知</li> <li><span class="type">[图文]</span>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知1</li> <li>关于清除炒股聊天等软件的通知2</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知3</li> <li>关于清除炒股聊天等软件的通知4</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知5</li> <li>关于清除炒股聊天等软件的通知6</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知7</li> <li>关于清除炒股聊天等软件的通知8</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知9</li> <li>关于清除炒股聊天等软件的通知10</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知11</li> <li>关于清除炒股聊天等软件的通知12</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知13</li> <li>关于清除炒股聊天等软件的通知14</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知15</li> <li>关于清除炒股聊天等软件的通知16</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知17</li> <li>关于清除炒股聊天等软件的通知18</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知19</li> <li>关于清除炒股聊天等软件的通知20</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知21</li> <li>关于清除炒股聊天等软件的通知22</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知23</li> <li>关于清除炒股聊天等软件的通知24</li> <li>武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢!</li> <li>科研处关于科研成果登记的通知25</li> <li>关于清除炒股聊天等软件的通知26</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知27</li> <li>关于清除炒股聊天等软件的通知28</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> <li>科研处关于科研成果登记的通知29</li> <li>关于清除炒股聊天等软件的通知30</li> <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li> </ul> </div> <div id="wwwwumingren_page"></div> </div> </body> </html>
本文来自武鸣人网站,转载请注明出处