<style type="text/css">
*{ margin:0px auto; padding:0px}
#left{ height:600px; background-color:#63C; float:left}
#right{ height:600px; background-color:#F33; float:left}
#btn{ 30px; height:30px; background-color:#FFF; position:relative; top:285px; color:#60F; font-weight:bold; text-align:center; line-height:30px; vertical-align:middle; float:left}
#btn:hover{ cursor:pointer}
</style>
</head>
<body>
<div style="1000px; height:600px">
<div id="left" style="200px;">
<div id="btn" onclick="Bian()" style="left:185px;">-></div>
</div>
<div id="right" style="800px;">
</div>
</div>
</body>
<script type="text/javascript">
function Bian()
{
Dong();
}
//改变大小和位置
function Dong()
{
var d1 = document.getElementById("left");
var d2 = document.getElementById("right");
var btn = document.getElementById("btn");
//左侧DIV变宽
var yskd1 = d1.style.width;
var w1 = yskd1.substr(0,yskd1.length-2);
var w1 = parseInt(w1)+2;
d1.style.width = w1+"px";
//右侧DIV变窄
var yskd2 = d2.style.width;
var w2 = yskd2.substr(0,yskd2.length-2);
var w2 = parseInt(w2)-2;
d2.style.width = w2+"px";
//将按钮移动
var ysjl = btn.style.left;
var w3 = ysjl.substr(0,ysjl.length-2);
var w3 = parseInt(w3)+2;
btn.style.left = w3+"px";
if(w2>200)
{
//自己调自己
window.setTimeout("Dong()",1);
}
}
</script>
</html>