有哪位高手知道如何实现iframe的翻页效果吗？

tingst 2007-03-03 12:33:11
图片实现翻页，有很多参考。我计划做一本用html页面作为内容的电子书，想实现翻页效果的动画，不知道如何解决，请高手们给点思路。
...全文
347 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
tingst 2007-03-05
  • 打赏
  • 举报
 回复
UUUUUUUUUUUOOOOUPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
tingst 2007-03-05
  • 打赏
  • 举报
 回复
有没有办法解决啊？没有人知道吗？
xuStanly 2007-03-04
  • 打赏
  • 举报
 回复
这样的页面特效感觉有点中看不中用。
xuStanly 2007-03-03
  • 打赏
  • 举报
 回复
<html>

<head>
<title>网页特效|Linkweb.cn/Js|---经典页面转换特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.curtain {
position:absolute;
visibility:hidden;
}
</style>
</head>

<body bgcolor="#FFFFFF" onLoad="init()"
style="width:100%;overflow-x:hidden;overflow-y:hidden">

<table bgcolor="#000000" cellspacing="1" width="500" align="center">
<tbody>
<tr>
<td bgcolor="#4775c3" align="center"><strong><em><font color="#FFFFFF" face="隶书"
size="5">页面转换特效</font></em></strong></td>
</tr>
</tbody>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="500" align="center" height="122">
<tr>
<td align="left" valign="top" width="15%" height="78"><font
face="幼圆" size="4" color="#FFFF00"><strong><em>简介</em></strong></font>
<p>　</p>
</td>
<td align="left" valign="top" width="85%" height="78"><font face="幼圆" size="4" color="#FFFF00"><strong><em> </em></strong></font>
<p><font face="幼圆" size="4" color="#FFFF00"><strong><em> </em></strong></font><em><strong><font face="幼圆" size="4" color="#FFFF00">
</font></strong></em><font face="幼圆" size="4" color="#FF0000"><em><strong>这是一个经典的页面转换效果，交错的几何形体从两侧对拉开，效果非常流畅，给人非常爽快的感觉，让人领略到爪哇脚本程序\CSS样式表单的魅力！！</strong></em></font></p>
</td>
</tr>
<tr>
<td align="left" width="15%" valign="top" height="44"><font
color="#FFFFFF">示</font></td>
<td align="center" valign="middle" width="85%" height="44"><script
LANGUAGE="JavaScript">
<!--
// 过渡的速度
var pause=50
var widthstep=10

// 效果的色彩
var curtaincolor1="FFFF00"

// 右
var curtaincolor2="EE8800"

// 下
var curtaincolor3="EE8800"

// 左
var curtaincolor4="FFFF00"

var screenheight
var screenwidth
var heightstep
var maxmove=0
var timer
var url
var curtaincontent1=""
var curtaincontent2=""
var curtaincontent3=""
var curtaincontent4=""

function init() {
if (document.all) {
screenwidth=document.body.clientWidth
screenheight=document.body.clientHeight
curtaincontent1="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor1+"'> </td></tr></table>"
curtaincontent2="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor2+"'> </td></tr></table>"
curtaincontent3="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor3+"'> </td></tr></table>"
curtaincontent4="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor4+"'> </td></tr></table>"
curtain1.innerHTML=curtaincontent1
curtain2.innerHTML=curtaincontent2
curtain3.innerHTML=curtaincontent3
curtain4.innerHTML=curtaincontent4
heightstep=Math.round(widthstep/screenwidth*screenheight)
}
if (document.layers) {
screenwidth=window.innerWidth
screenheight=window.innerHeight
curtaincontent1="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor1+"'> </td></tr></table>"
curtaincontent2="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor2+"'> </td></tr></table>"
curtaincontent3="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor3+"'> </td></tr></table>"
curtaincontent4="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor4+"'> </td></tr></table>"
document.curtain1.document.write(curtaincontent1)
document.curtain1.document.close()
document.curtain2.document.write(curtaincontent2)
document.curtain2.document.close()
document.curtain3.document.write(curtaincontent3)
document.curtain3.document.close()
document.curtain4.document.write(curtaincontent4)
document.curtain4.document.close()
heightstep=Math.round(widthstep/screenwidth*screenheight)
}
}

function openpage(thisurl) {
url=thisurl
if (document.all) {
document.all.curtain1.style.posTop=-screenheight
document.all.curtain1.style.posLeft=0
document.all.curtain2.style.posTop=0
document.all.curtain2.style.posLeft=screenwidth
document.all.curtain3.style.posTop=screenheight
document.all.curtain3.style.posLeft=0
document.all.curtain4.style.posTop=0
document.all.curtain4.style.posLeft=-screenwidth
document.all.curtain1.style.visibility="VISIBLE"
document.all.curtain2.style.visibility="VISIBLE"
document.all.curtain3.style.visibility="VISIBLE"
document.all.curtain4.style.visibility="VISIBLE"
movecurtains()
}
if (document.layers) {
document.curtain1.top=-screenheight
document.curtain1.left=0
document.curtain2.top=0
document.curtain2.left=screenwidth
document.curtain3.top=screenheight
document.curtain3.left=0
document.curtain4.top=0
document.curtain4.left=-screenwidth
document.curtain1.visibility="VISIBLE"
document.curtain2.visibility="VISIBLE"
document.curtain3.visibility="VISIBLE"
document.curtain4.visibility="VISIBLE"
movecurtains()
}
}

function movecurtains() {
if (maxmove<=screenwidth/2) {
if (document.all) {
document.all.curtain1.style.posTop+=heightstep
document.all.curtain2.style.posLeft-=widthstep
document.all.curtain3.style.posTop-=heightstep
document.all.curtain4.style.posLeft+=widthstep
}
if (document.layers) {
document.curtain1.top+=heightstep
document.curtain2.left-=widthstep
document.curtain3.top-=heightstep
document.curtain4.left+=widthstep
}
maxmove+=widthstep
var timer=setTimeout("movecurtains()",pause)
}
else {
clearTimeout()
document.location.href=url
}
}

// - End of JavaScript - -->
</script>
<p><font color="#0000FF"> 点击这里</font>，<a href="javascript:openpage('../index.asp')">看看效果吧!!</a>
</p>
<div ID="deletethisblock" class="redirstyle"
style="position:absolute;left:10px;top:10px;color:000000;font-family:"
宋体";font-size:9pt"><a href="javascript:openpage('../index.asp')"><p></a>　</p>
</div><div ID="curtain1" class="curtain"></div><div ID="curtain2" class="curtain"></div><div
ID="curtain3" class="curtain"></div><div ID="curtain4" class="curtain"></div></td>
</tr>
</table>


<table border="0" width="100%">
<tr>
<td width="100%">　</td>
</tr>
</table>
</body>
tingst 2007-03-03
  • 打赏
  • 举报
 回复
up
tingst 2007-03-03
  • 打赏
  • 举报
 回复
本人的意思是想实现例如：
http://www.iparigrafika.hu/pageflip/
这样的效果，只是我每页要求显示的是html页面。
有相关例子或思路吗？
xuStanly 2007-03-03
  • 打赏
  • 举报
 回复
http://www.jscode.cn/JsHtml/Js178.htm
xuStanly 2007-03-03
  • 打赏
  • 举报
 回复
搜索网页特效，很多的。
[原]用Excel做报表的试验
写这篇文章之前，先提几个问题，希望高手留言指点、讨论： 1、 水晶报表(Crystal Reports)的表头能不能冻结，即：记录多的时候，记录翻页而报表的头部持久显示；如果能怎么实现。 2、 水晶报表在设计的时候表头字段是拖上去的，如果要做一个报表定制工具，这个表头能用程序控制吗？(非vs2005自带的水晶报表) 3、...
用Excel做报表的试验
写这篇文章之前，先提几个问题，希望高手留言指点、讨论： 1、水晶报表(Crystal Reports)的表头能不能冻结，即：记录多的时候，记录翻页而报表的头部持久显示；如果能怎么实现。 2、水晶报表在设计的时候表头字段是拖上去的，如果要做一个报表定制工具，这个表头能用程序控制吗？(非vs2005自带的水晶报表) 3、OWC组建在用vs2005做Web开发的时候为什么添加不到工具栏，...
Excel做报表的试验
写这篇文章之前，先提几个问题，希望高手留言指点、讨论：1、水晶报表(Crystal Reports)的表头能不能冻结，即：记录多的时候，记录翻页而报表的头部持久显示；如果能怎么实现。2、水晶报表在设计的时候表头字段是拖上去的，如果要做一个报表定制工具，这个表头能用程序控制吗？(非vs2005自带的水晶报表)3、OWC组建在用vs2005做Web开发的时候
js的调试方法
//摘自网络下面是折磨了我一天半的一段脚本,这段脚本是从网上获取的,是实现图片翻页滚动的效果，因为我们要滚动的图片高度和原图片高度不一样，所以要改动脚本理的一些参数，可是这些参数都没有做注释，要想设置成合适的参数，必须看懂脚本运行的原理。这个脚本里充满了各种迷惑，是我目前看到的最鬼魅的一组函数。中午我明白里里面的原理，并做了一定的注释。这个脚本运行的原理是，声明一个数组，然后每个数组里放一个div
H5+CSS3笔记
关于授课（学习） 许多人相信，他们的智力水平是生来是注定的，学业无成是因为先天不足。但实际情况是，当学习新东西时，大脑会发生改变，也就是说影响智力水平的因素在很大程度上是你本人掌握的。（自信） 上课：主动参与学习可以有更好的效果。 上课的跟着思路走-》琢磨-》提出问题。 上课进行互动，可以开一些玩笑（调节气氛，没有恶意不影射谁），有\没有问题都要及时说出来。 上课安排的课堂练习通常和当天的讲解内容及之前的知识有关，尝试着去想、去做。即使做不出来也可以起到巩固知识的效果。 练习：想成为高手就要有循序渐进的
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章