js+css实现静态页分页显示特效

2周前 (05-06 14:55)阅读16回复0
管理员
发消息
注册排名1
经验值4714
级别管理员
主题942
回复2
楼主
很漂亮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&nbsp;'+(i+1)+'" id="soojs_'+(i+1)+'">'+"&nbsp;"+(i+1)+"&nbsp;"+'</a>&nbsp;&nbsp;&nbsp;&nbsp;');
  }
  _$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>
踩0
☆收藏0
分页
回帖 纯css实现图层折叠展开效果 文字逐行向上或向下滚动切换特效
js+css实现静态页分页显示特效期待您的回复！

取消
请先登录再评论，若不是会员请先注册！
js+css实现静态页分页显示特效

js+css实现静态页分页显示特效 期待您的回复！

插入网络图片

js+css实现静态页分页显示特效期待您的回复！
