js实现的静态分页效果-点击分页链接-页内刷新
javascript
python
shell
powershell
python模块
php编程
php实例
asp.net
正则表达式
nginx
apache
linux
linux命令
centos
ubuntu
mysql
sql数据库
css教程
首页
脚本编程
网站编程
数据库
系统管理
服务器管理
网页教程
软件教程
电脑教程
手机教程
工具软件
电子书籍
php实例
shell脚本
jquery选择器
python模拟登录
linux命令
nginx
apache
当前位置：
首页
>
脚本特效
>
文本链接
> 正文
js实现的静态分页效果-点击分页链接-页内刷新
发布时间：2020-08-31
编辑：
脚本学堂
一款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" 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="<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" 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_fckprotectedatt="%20onload%3D%22_%24InitPages()%3B%22" > <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><a href=http://www.jb200.com/jb/ target=_blank class=infotextkey>脚本</a>学习网，专业网站脚本技术站点。</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>
提示：可修改代码后再运行!
上一篇：
定制Title文字说明效果
下一篇：
实用的隔行换色效果
与 js实现的静态分页效果-点击分页链接-页内刷新 有关的文章
本文标题：
js实现的静态分页效果-点击分页链接-页内刷新
本页链接：
http://www.jb200.com/tx/150.html
浏览排行
1
使用jQuery实现公告文字左右滚动
2
jquery实现文字上下滚动
3
css可定义颜色的文字删除线、下划线
4
使用jQuery插件来实现的多行文字滚屏效果
5
jQuery限制文本框中只能输入中文或英文
6
使用JavaScript实现链接文字翻滚特效
7
JavaScript实现文字颜色循环变化
8
js实现的静态分页效果-点击分页链接-页内刷
9
定制Title文字说明效果
10
设置文字大中小
栏目分类
菜单导航
网页布局
背景特效
广告代码
图片特效
CSS相关
日期时间
文本链接
表单及按钮
表格相关
计算转换
其它
栏目导航
脚本
服务器
数据库
python
linux
linux命令
shell脚本
javascript
javascript数组
jquery
jquery选择器
jquery事件
jquery菜单
python列表
python爬虫
python模拟登录
php编程
php教程
php面试题
php随机数
php数组
php分页
php正则
php排序
asp.net
批处理
正则表达式
mysql
mysql分页
mysql存储过程
mysql日志
mysql教程
sql数据库
nginx
apache
手机教程
热点文章
1
定制Title文字说明效果
2
js实现的静态分页效果-点击分页链接-页内刷
3
实用的隔行换色效果
4
设置文字大中小
关于本站
|
网站地图
|
联系我们
|
免责声明
|
友情链接
鄂ICP备13010364号-22
CopyRight © 2010-2021
脚本学堂
Jb200.com , All Rights Reserved.
