<!-- saved from url=(0078)file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/ok.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"> 
body {overflow:hidden;}</style><script type="text/javascript">  var winWidth = 0;
 var winHeight = 0;
 function findDimensions() //函数:获取尺寸            {        //获取窗口宽度
if (document.innerWidth)
 winWidth = window.innerWidth;
 else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
 if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
 winWidth = document.documentElement.clientWidth;
 } }
findDimensions();
 //调用函数,获取数值                    window.onresize=findDimensions;

//-->
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="application/javascript">
  $(document).ready(function(){
$("#center").css({
  "z-index":"1",
"top":"0px",
"left":"0px",
"width":winWidth,
"height":winHeight,
"background-color":"#CF3",
"position":"fixed",
"display":"block",
"overflow":"hidden"
});$("#up").css({  
  "z-index":"2",
"background-color":"#33C",
"position":"fixed",
"top":-winHeight,
"height":winHeight,
"width":winWidth,
"display":"block",
"overflow":"hidden",
"left":"0px"
});$("#left").css({
     "z-index":"3",
"background-color":"#39C",
"position":"fixed",
"top":"0px",
"width":winWidth,
"left":-winWidth,
"height":winHeight,
"overflow":"hidden",
"display":"block"

});$("#right").css({
"z-index":"4",
"background-color":"#6FF",
"position":"fixed",
"top":"0px",
"width":winWidth,
"left":winWidth,
"height":winHeight,
"overflow":"hidden",
"display":"block"

});
$("#down").css({
"z-index":"5",
"background-color":"#FF9",
"position":"fixed",
"top":winHeight,
"width":winWidth,
"left":"0px",
"height":winHeight,
"overflow":"hiden",
"display":"block"
});
  $("#aup").click(function(){
  $("#up").animate({top:"0px"},500);
  $("#center").animate({top:winHeight},500);
  });
  
  $("#bup").click(function(){
  $("#up").animate({top:-winHeight},500);
  $("#center").animate({top:"0px"},500);
  });
  $("#adown").click(function(){
  $("#down").animate({top:"0px"},500);
  $("#center").animate({top:-winHeight},500);
  });
  $("#bdown").click(function(){
  $("#down").animate({top:winHeight},500);
  $("#center").animate({top:"0px"},500);
  
  });
$("#aleft").click(function(){
  $("#left").animate({left:"0px"},500);
  $("#center").animate({left:winWidth},500);
  
  });
  $("#bleft").click(function(){
  $("#left").animate({left:-winWidth},500);
  $("#center").animate({left:"0px"},500);
  });
  $("#aright").click(function(){
  $("#right").animate({left:"0px"},500);
  $("#center").animate({left:-winWidth},500);
  });
   $("#bright").click(function(){
  $("#right").animate({left:winWidth},500);
  $("#center").animate({left:"0px"},500);
  });
});
</script></head>
<body onResize="location.reload()"><div id="up" >
<button id="bup" >down</button>
</div>
<div id="left">
left<button id="bleft">right</button>
</div>
<div id="center">
center  
  <button id="aup">up</button>
<button id="adown">down</button>
<button id="aleft">left</button>
<button id="aright">right</button>
</div>
<div id="right">
right<button id="bright">left</button>
</div>
<div id="down">
down<button id="bdown">up</button>
</div></body></html>

解决方案 »

  1.   


    <!-- saved from url=(0078)file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/ok.html -->
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css"> 
    body {overflow:hidden;}</style><script type="text/javascript">  var winWidth = 0;
     var winHeight = 0;
     function findDimensions() //函数:获取尺寸            {        //获取窗口宽度
    if (document.innerWidth)
     winWidth = window.innerWidth;
     else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
    //获取窗口高度
    if (window.innerHeight)
    winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
    //通过深入Document内部对body进行检测,获取窗口大小
     if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
    {
    winHeight = document.documentElement.clientHeight;
     winWidth = document.documentElement.clientWidth;
     } }
    findDimensions();
     //调用函数,获取数值                    window.onresize=findDimensions;

    //-->
    </script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="application/javascript">
      $(document).ready(function(){
    $("#center").css({
      "z-index":"1",
    "top":"0px",
    "left":"0px",
    "width":winWidth,
    "height":winHeight,
    "background-color":"#CF3",
    "position":"fixed",
    "display":"block",
    "overflow":"hidden"
    });$("#up").css({  
      "z-index":"2",
    "background-color":"#33C",
    "position":"fixed",
    "top":-winHeight,
    "height":winHeight,
    "width":winWidth,
    "display":"block",
    "overflow":"hidden",
    "left":"0px"
    });$("#left").css({
         "z-index":"3",
    "background-color":"#39C",
    "position":"fixed",
    "top":"0px",
    "width":winWidth,
    "left":-winWidth,
    "height":winHeight,
    "overflow":"hidden",
    "display":"block"

    });$("#right").css({
    "z-index":"4",
    "background-color":"#6FF",
    "position":"fixed",
    "top":"0px",
    "width":winWidth,
    "left":winWidth,
    "height":winHeight,
    "overflow":"hidden",
    "display":"block"

    });
    $("#down").css({
    "z-index":"5",
    "background-color":"#FF9",
    "position":"fixed",
    "top":winHeight,
    "width":winWidth,
    "left":"0px",
    "height":winHeight,
    "overflow":"hiden",
    "display":"block"
    });
      $("#aup").click(function(){
      $("#up").animate({top:"0px"},500);
      $("#center").animate({top:winHeight},500);
      });
      
      $("#bup").click(function(){
      $("#up").animate({top:-winHeight},500);
      $("#center").animate({top:"0px"},500);
      });
      $("#adown").click(function(){
      $("#down").animate({top:"0px"},500);
      $("#center").animate({top:-winHeight},500);
      });
      $("#bdown").click(function(){
      $("#down").animate({top:winHeight},500);
      $("#center").animate({top:"0px"},500);
      
      });
    $("#aleft").click(function(){
      $("#left").animate({left:"0px"},500);
      $("#center").animate({left:winWidth},500);
      
      });
      $("#bleft").click(function(){
      $("#left").animate({left:-winWidth},500);
      $("#center").animate({left:"0px"},500);
      });
      $("#aright").click(function(){
      $("#right").animate({left:"0px"},500);
      $("#center").animate({left:-winWidth},500);
      });
       $("#bright").click(function(){
      $("#right").animate({left:winWidth},500);
      $("#center").animate({left:"0px"},500);
      });
    });
    </script></head>
    <body onResize="location.reload()"><div id="up" >
    <button id="bup" >down</button>
    </div>
    <div id="left">
    left<button id="bleft">right</button>
    </div>
    <div id="center">
    center  
      <button id="aup">up</button>
    <button id="adown">down</button>
    <button id="aleft">left</button>
    <button id="aright">right</button>
    </div>
    <div id="right">
    right<button id="bright">left</button>
    </div>
    <div id="down">
    down<button id="bdown">up</button>
    </div></body></html>