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

图片实现翻页，有很多参考。我计划做一本用html页面作为内容的电子书，想实现翻页效果的动画，不知道如何解决，请高手们给点思路。

解决方案 »

  1.   

    <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+"'>&nbsp;</td></tr></table>"
    curtaincontent2="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor2+"'>&nbsp;</td></tr></table>"
    curtaincontent3="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor3+"'>&nbsp;</td></tr></table>"
    curtaincontent4="<table cellpadding=0 cellspacing=0 width='"+screenwidth+"' height='"+screenheight+"'><tr><td bgcolor='"+curtaincolor4+"'>&nbsp;</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>
      

  2.   

    本人的意思是想实现例如：
    http://www.iparigrafika.hu/pageflip/
    这样的效果，只是我每页要求显示的是html页面。
    有相关例子或思路吗？
      

  3.   

    UUUUUUUUUUUOOOOUPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP