<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>CSS+JS实现的静态页面翻页效果</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: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;}
#Main_News{ /*background-color: teal;*/border: 1px #acd0f0 solid; 445px;height: 402px;}
#Content{ 425px;height: 372px;margin: 10px 10px 0px 10px;_margin: 10px 5px 0px 5px; /* CSS Hack For IE6 */overflow: hidden;text-align: left;}
#Pages{ 445px;height: 20px;margin: 0px;text-align: right;}
</style>
<script defer="defer" language="javascript" type="text/javascript">
<!--
var _offset = 0;
function _$id(_obj) {
return document.getElementById(_obj);
}
function _$Pages(_i) {
_$id("Content").scrollTop = (_$id("Content").clientHeight*_i);
ab=document.getElementById("pages")
aa=ab.getElementsByTagName("a").length
for(k=0;k<aa;k++){
if(k==_i){ab.getElementsByTagName("a")[k].style.color="red";
}else{
ab.getElementsByTagName("a")[k].style.color="#000000"
}
}
}
function _$InitPages() {
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)+'">'+(i+1)+'</a> ');
}
_$id("Pages").innerHTML=_s;
}
//-->
</script>
</head>
<body onload="_$InitPages();">
<div id="Main_News">
<!--主要新闻-->
<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>3关于清除炒股聊天等软件的通知</li>
<li>4科研处关于科研成果登记的通知</li>
<li>5关于清除炒股聊天等软件的通知</li>
<li>6关于清除炒股聊天等软件的通知</li>
<li>7科研处关于科研成果登记的通知</li>
<li>8关于清除炒股聊天等软件的通知</li>
<li>9关于清除炒股聊天等软件的通知</li>
<li>10科研处关于科研成果登记的通知</li>
<li>11关于清除炒股聊天等软件的通知</li>
<li>12关于清除炒股聊天等软件的通知</li>
<li>13科研处关于科研成果登记的通知</li>
<li>14关于清除炒股聊天等软件的通知</li>
<li>15关于清除炒股聊天等软件的通知</li>
<li>16科研处关于科研成果登记的通知</li>
<li>17关于清除炒股聊天等软件的通知</li>
<li>18关于清除炒股聊天等软件的通知</li>
<li>19科研处关于科研成果登记的通知</li>
<li>20关于清除炒股聊天等软件的通知</li>
<li>21关于清除炒股聊天等软件的通知</li>
<li>23科研处关于科研成果登记的通知</li>
<li>24关于清除炒股聊天等软件的通知</li>
<li>25关于清除炒股聊天等软件的通知</li>
<li>26科研处关于科研成果登记的通知</li>
<li>27关于清除炒股聊天等软件的通知</li>
<li>28关于清除炒股聊天等软件的通知</li>
<li>29科研处关于科研成果登记的通知</li>
<li>30关于清除炒股聊天等软件的通知</li>
<li>31关于清除炒股聊天等软件的通知</li>
<li>32科研处关于科研成果登记的通知</li>
<li>33关于清除炒股聊天等软件的通知</li>
<li>34关于清除炒股聊天等软件的通知</li>
<li>35科研处关于科研成果登记的通知</li>
<li>36关于清除炒股聊天等软件的通知</li>
<li>37关于清除炒股聊天等软件的通知</li>
<li>38科研处关于科研成果登记的通知</li>
<li>39关于清除炒股聊天等软件的通知</li>
<li>40关于清除炒股聊天等软件的通知</li>
<li>41科研处关于科研成果登记的通知</li>
<li>42关于清除炒股聊天等软件的通知</li>
<li>43关于清除炒股聊天等软件的通知</li>
<li>44科研处关于科研成果登记的通知</li>
<li>45关于清除炒股聊天等软件的通知</li>
<li>46关于清除炒股聊天等软件的通知</li>
</ul>
</div>
<div id="Pages">
</div>
</div>
</body>
</html>
分页效果如下图：