<!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 :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; } #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; } #Pages a:link{color:#000000} #Pages a:hover{color:#FF0000} #Pages a:active{color:#3300FF} </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); 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=""; } } 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)+'" id="soojs_'+(i+1)+'">'+" "+(i+1)+" "+'</a> '); } _ $id("Pages").innerHTML=_s; _ $id("soojs_"+1).style.backgroundColor="#ff9900"; } //--> </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>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</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="Pages"></div> </div> </body> </html> 转载请注明出处-中国设计秀-cnwebshow.com
粤ICP备05067046号 RSS 
