直接上代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
</head><body>
<div id="frameContent">
写上你要分页的东西！
</div>
<p>
</p><div id="pages" style="font-size: 12px;"></div>
<script language="javascript">
var obj = document.getElementById("frameContent"); //获取内容层
var pages = document.getElementById("pages"); //获取翻页层
var pgindex=1; //当前页
var lastPage = 1 ; //最后一页
var offsetHeight_ys = parseInt(obj.offsetHeight) ;
window.onload = function() //重写窗体加载的事件
{
//alert("parseInt(obj.scrollHeight)="+parseInt(obj.scrollHeight));
//alert("parseInt(obj.offsetHeight)="+parseInt(obj.offsetHeight));
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));//获取页面数量
lastPage = allpages ;
pages.innerHTML = "<b>共"+allpages+"页</b>"; //输出页面数量
for (var i=1;i<=allpages;i++){
pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a> ";
//循环输出第几页
}
pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">上一页</a> <a href=\"javascript:gotopage('1');\">下一页</a>"
}
function gotopage(value){
try{
value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
}catch(e){
}
}
function showPage(pageINdex)
{
alert("pageINdex="+pageINdex);
if( pageINdex > lastPage){
//alert("超过最大值");
obj.style.height = "200px" ; //这里200px与css中的height:200px一样
pageINdex = lastPage
}else if( pageINdex < 1){
pageINdex = 1 ;
}
var temp = parseInt(obj.offsetHeight) ;
//当遮挡长度+显示长度> 总的长度，即翻到最后一页，就会出现问题，以下是一种解决方法。
if( (pageINdex-1)*parseInt(obj.offsetHeight) + 202 > parseInt(obj.scrollHeight)){
//alert("当遮挡长度+显示长度> 总的长度");
obj.style.height = (parseInt(obj.scrollHeight) - (pageINdex-1)*parseInt(obj.offsetHeight) )+"px" ;
//根据高度,输出指定的页,这个高度必须保持为一个值,(obj.offsetHeight)会因为obj.style.height改变而改变.所以这里用temp先取到输出的高度.
obj.scrollTop=(pageINdex-1)*temp ;
}else{
obj.style.height = "200px" ;//这里200px与css中的height:200px一样
obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight) ; //根据高度，输出指定的页
}
pgindex= parseInt(pageINdex); //转换成int，否则页数相加的时候容易变成字符串相加
}
</script>
<style type="text/css">
#frameContent{
width:500px; /*调整显示区的宽*/
height:200px; /*调整显示区的高*/
line-height:20px;
border:1px solid #000000;
overflow-pageINdex:hidden;
overflow-y:hidden;
word-break:break-all;
}
</style>
</body></html>
分享到：
相关推荐
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
【js+css翻页时钟插件】是一种利用JavaScript（js）和层叠样式表（css）技术实现的动态时钟展示效果。这种插件在网页设计中常常被用来增加互动性和视觉吸引力，使得时间的呈现更加独特和引人注意。下面我们将详细...
总的来说，"html+css+js表白翻页相册"是一个集HTML结构、CSS美化和JavaScript交互于一体的浪漫应用，它展示了Web前端开发的魅力，同时也提供了一个学习和实践这三项技术的实战案例。无论是对编程感兴趣想要制作类似...
在本项目"超酷jQuery+CSS3翻页时钟动画.zip"中，我们可以探索一系列前沿的前端技术，包括HTML5、jQuery、JavaScript以及CSS3。这个项目的核心是创建一个动态且引人注目的翻页时钟，它利用了这些技术的强大力量，将...
- `js`：这里可能包含用于处理用户交互和控制轮播逻辑的JavaScript代码。例如，实现自动轮播、暂停/恢复轮播、响应用户点击事件等功能。 - `html`：HTML文件是页面的骨架，将包含用于展示图片的div元素和其他必要的...
要实现翻页效果，我们需要创建一个包含页面内容的容器，通常是一个div元素，它将作为翻页的主体。我们可以使用`<div class="page">`来定义这个容器，并在其中添加要展示的内容。此外，还需要两个按钮或触发器，用于...
标题 "多功能电子相册翻书页效果特效HTML+css+js代码" 描述了一种用于网页设计的技术，这种技术能够实现模拟真实书籍翻页效果的动态电子相册。电子相册翻页特效使得用户在浏览网页上的照片集时，能够体验到如同翻阅...
这是一款大师级的html5翻书效果（翻页效果），这种翻书效果使用了css3 3d transform属性和少量的js来实现鼠标hover书本时，书本打开动画。注意：必须是支持css3 3d transform属性的浏览器才有效果。IE10看不到效果。
### js+css实现上下翻页相册代码知识点详解 #### 一、项目概述 本项目通过结合JavaScript与CSS技术，实现了一个动态且交互性较强的上下翻页相册特效。该相册不仅支持从上到下的翻页切换，还支持从下往上的翻页动作...
该压缩包文件"js+css3实现的翻页动画效果数字时钟源码.zip"包含了一个使用JavaScript（js）和CSS3技术实现的创新性数字时钟应用。这个时钟以翻页动画的形式展示时间，为用户带来独特的视觉体验。在深入探讨其技术...
在网页设计领域，JavaScript（JS）和CSS（层叠样式表）是不可或缺的两种技术，它们共同作用于网页，使得网页不仅有静态的结构，还有动态的效果和丰富的交互性。"JS+CSS网页特效大合"这个压缩包很可能包含了一系列...
在这个项目中，你可以找到名为“20140915相册翻页效果div+css+jquery特效”的压缩包文件，其中包含了实现相册翻页效果的所有源代码。通过对这些文件的学习和实践，你可以深入理解如何结合使用HTML、CSS和jQuery来...
本项目是利用原生JavaScript（JS）和层叠样式表（CSS）来实现这种功能，无需依赖任何外部库或框架。下面将详细探讨如何使用这两种技术来创建一个功能完备的分页组件。 首先，我们要理解分页的基本结构。通常，分页...
总的来说，实现一个JS+CSS的万年历组件，需要深入理解JavaScript日期处理、CSS布局以及可能涉及的农历转换算法。通过巧妙的编程和设计，我们可以创建出既实用又美观的万年历，满足用户的多样化需求。在实际项目中，...
这是一款基于js+css实现上下翻页相册特效代码，相册可以从上下两个方向进行切换，是一款非常实用的幻灯片特效源码。 先为大家展示效果图： 效果演示 源码下载 为大家分享的jQuery幻灯片带缩略图轮播代码如下 &...
首先，HTML（超文本标记语言）是网页内容的基础结构，而CSS（层叠样式表）则负责定义这些内容的外观和布局。在3D旋转相册项目中，HTML将用于创建相册的基本框架，包括图片的容器和控制按钮，而CSS则用来实现3D变换和...
HTML+JS+CSS实现学生信息管理系统效果页面增删改查翻页代码难点难点1难点2难点3难点4结语 效果 话不多说，直接看效果，本次代码较为复杂，希望大家可以耐心阅读，不懂的可以评论或者邮箱联系我（1079349989@qq.com）...
【标题】"js+css3日历便签样式特效.zip" 涉及的主要知识点是JavaScript、CSS3以及与jQuery相关的网页特效制作。这个压缩包包含了一种将日历和便签结合的视觉效果，利用JavaScript动态交互和CSS3的高级特性实现。以下...
`js`目录则包含jQuery库和其他自定义的JavaScript脚本，这些脚本实现了全屏翻页的逻辑和动画控制。 综上所述，"jQuery+CSS3网页弹性动画过渡全屏翻页特效"是结合了jQuery的强大交互能力和CSS3的视觉表现力，创造出...