css+js实现静态分页
<!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" >
<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;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;}
#Pages{width: 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 >
