首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
文本操作
> 正文
又一款静态页面分页效果
2009-12-19 文本操作 ℃
<!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>
相关特效代码
无相关信息
热门特效代码
输入框的文字闪烁变色引人注意
纯CSS内页内容切换选项卡
鼠标经过链接显示注释旋转风火轮
指向自动选择的输入框
放大镜链接效果
带注释的链接特效
文字闪烁效果
带注释的链接特效代码
点击文字显示隐藏链接
WEB2.0圆形边框css做法
推荐特效代码
字符连续消隐
文字变色逐个出现
段落文字百叶窗效果输出
点击文字显示隐藏链接
文字由小变大由大变小（动态变化
文字来回上下移动或跳动
