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

7个月前 (05-06 14:55)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复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
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/883.html

回帖

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

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息