<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a
href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html
xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" 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;
}
//-->
</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>
</ul>
</div>
<div id="Pages"></div>
</div>
</body>
</html
>
分享到：
相关推荐
JQuery做静态分页
jQuery静态分页插件是一种广泛应用于网页开发中的组件，它能帮助开发者轻松地在大量数据中实现分页显示，提高用户体验。在这个名为"jQuery静态分页插件.zip"的压缩包中，包含了实现这一功能所需的全部资源。接下来，...
在这个场景下，"伪静态分页解决路径问题"指的是在网站分页设计中，如何运用伪静态技术处理页面链接，确保每个分页的URL既具有静态页面的特征，又能正确指向对应的内容。 首先，我们需要理解什么是分页。在内容丰富...
在IT行业中，静态分页是一种常见的网页数据展示技术，它被广泛应用于各种网站，如博客、论坛、电商网站等，以帮助用户更有效地浏览大量信息。"简单的静态分页"项目，正如标题所言，是一个相对基础的实现，旨在提供一...
html前台分页,静态分页,使用及其简单,支持多个列表
JavaScript（简称Js）作为一种客户端脚本语言，常用于实现无刷新的动态效果，包括静态分页。静态分页，虽然名字中有“静态”一词，但在Js中，它实际上是指在不重新加载整个页面的情况下，通过JavaScript代码来更新...
### C#生成静态分页页面知识点详解 #### 一、背景与目的 在Web开发过程中，为了提升用户体验和减轻服务器负担，将动态页面转化为静态页面（即HTML静态分页）是一种常见做法。这种方式不仅能够加快页面加载速度，还...
不过需要注意，静态分页不适合数据实时更新或数据量非常大的场景，因为它无法动态加载新数据，所有页面都需要预先生成。在这些情况下，服务器端分页或使用Vue、React等前端框架进行动态渲染会更为合适。
"jQuery静态分页"是利用JavaScript库jQuery实现的一种简单且高效的分页解决方案。 jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。通过jQuery，我们可以轻松地...
在IT行业中，生成HTML静态分页页面是一种常见的需求，特别是在网站开发中，为了提高用户体验和搜索引擎优化（SEO）效果。本示例通过“aspnetpager”动态原理来实现这一功能，下面将详细介绍这个过程。 首先，`...
本项目“Ajax静态分页”就是利用Ajax实现的一种轻量级的分页解决方案。 首先，我们需要了解Ajax的基础。Ajax的核心是XMLHttpRequest对象，它允许JavaScript向服务器发送HTTP请求并接收响应。通过创建XMLHttpRequest...
JavaScript静态分页是一种常见的网页数据展示技术，它允许用户在不刷新整个页面的情况下，通过点击分页按钮加载更多的数据内容。这种技术对于处理大量数据，尤其是数据库查询结果时，能够提高用户体验，避免一次性...
在ASP中实现静态分页是一项常见的需求，它有助于提高网站性能，减轻服务器负担，并且有利于搜索引擎优化。静态分页通常涉及将大型数据集分割成较小的部分，每部分作为一个独立的HTML页面，用户可以逐页浏览。 在...
本主题将详细探讨"静态分页"和"搜索插件"这两个核心概念。 首先，让我们来理解什么是静态分页。静态分页是一种常见的网页数据展示方式，它将大量的数据分成若干个较小的部分，每次只加载和显示一部分，其余部分则...
静态分页与动态分页有所不同，静态分页是指在服务器端预先计算好所有页的数据，然后将每一页的数据存储为独立的页面或视图状态，当用户请求某一页时，直接返回对应页面的数据，而不是每次都根据当前的查询条件重新...
layui实现动态和静态分页 layui是一个流行的前端框架，它提供了许多实用的功能模块，今天我们来学习一下layui实现动态和静态分页的详细方法。 首先，我们需要了解一下layui的基本使用方法。layui提供了一个非常...
整站生成静态页实例！！ 1.图片模块：图片上传，自动裁切缩略图以及图片信息管理模块。无限极栏目。 2.新闻系统模块，新闻的发布以及管理。无限极栏目。 3.自定义皮肤以及自定义信息显示功能：系统自带标签可使不...
在Asp中实现AJAX静态分页，主要是为了让用户在浏览大量数据时，无需等待整个页面刷新，而是仅加载当前所需的分页内容。这不仅可以减少网络传输的数据量，还能提供更流畅的浏览体验。下面将详细介绍如何实现Asp+AJAX...
在本示例中，"ASP源码—AJAX 静态分页示例.zip" 提供了一个使用ASP和AJAX技术实现静态分页功能的代码实例。这涉及到两个主要的技术领域：ASP和AJAX，它们在网页开发中都扮演着重要的角色。 1. ASP（Active Server ...