要实现一个效果，点击按钮，当前页面横向切换成另一个页面。。。

前几天给网友解题的一个参考~~~
<!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=gb2312" />
<title>无标题文档</title>
<style>
#op{font:normal 14px/150% '宋体'; position:relative; background:#efefef; padding:10px; width:320px; height:100px;}
#op div{width:250px; height:100px; position:absolute; left:0; top:0; background:#efefef; overflow:hidden; white-space:nowrap;}
span{color:#f00; font-weight:bold;}
a{color:#00f; text-decoration:none}
a:hover{text-decoration:underline}
</style>
<script>
var ds, cur_d, w=1, t = null;
onload = function(){
ds = document.getElementById('op').getElementsByTagName('div');
cur_d = ds[1];
}
function load(n){
if(cur_d == ds[n-1]) return;
ds[n-1].style.width = '1px';
cur_d.style.zIndex=99;
ds[n-1].style.zIndex=100;
if(t)clearInterval(t);
t = setInterval(start.call(start, ds[n-1]), 10);
}
function start(d, n){
return function(){
w += 5;
d.style.width = w+'px';
if(w>=250){
clearInterval(t);
w = 1;
cur_d = d;
}
}
}
</script>
</head>
<body>
<a href="javascript:load(2)" class="on">【1】</a><a href="javascript:load(1)">【2】</a>
<div id="op">
   <div>
<a href="http://bbs.blueidea.com"><span>[abcde]</span>abcdeabcdeabcdeabcde</a><br />
<a href="http://www.blueidea.com"><span>[24242]</span>24242242422424224242m</a><br />
<a href="http://www.hansir.cn" ><span>[MRCGE]</span>MRCGEMRCGEMRCGEMRCGEn</a><br />
   </div>
      <div style="width:300px">
<a href="http://www.hansir.cn" ><span>[我的博客]</span>http://www.hansir.cn</a><br />
<a href="http://www.blueidea.com"><span>[csdn]</span>http://www.csdn.net</a><br />
<a href="http://bbs.blueidea.com"><span>[我的博客]</span>http://bbs.hansir.cn</a><br />
    <a href="http://www.hansir.cn" ><span>[我的博客]</span>http://www.hansir.cn</a><br />
   </div>
 </div>
</body>
</html>

解决方案 »

  1.   

    楼上的效果很好，但不是我想要的，我想要的是整个页面的替换
    有人提议在div里嵌iframe,然后div做横向移动效果，希望其他人
    在给点意见
      

  2.   

    <head>
    <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
    <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
    </head>
      

  3.   

    你用windowclose 和windowopen 就能实现此功能啊
    或者用超链接也可以实现啊 不过要进行设置啊
      

  4.   

    <meta http-equiv="Page-Enter" content="revealTrans(Duration=0.5,Transition=32)">
    <meta http-equiv="Page-Exit" content="revealTrans(Duration=0.5,Transition=32)">在每一页加上这行，保证你会发现切换的时候爽得不得了，就是不支持FF.
      

  5.   

    IE应该支持进出效果,最早用frantpage可以实现的...
      

  6.   

    我上下平滑用的是jquery，效果不是很好