//设置样式<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:1000px; height:600px;}
#nei{ width:1000px; height:300px; margin-top:30px;}
#left{ height:300px; background-color:#F00; float:left;}
#right{ height:300px; background-color:#00F; float:left;}
#fk{ width:50px; height:50px; background-color:#FF0; position:relative; top:-175px;}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
<div id="left" style="width:200px;"></div>
<div id="right" style="width:800px;"></div>
</div>
<div id="fk" style="left:-280px;"></div>
</div>
</body>
<script>//给f的按钮设置点击事件，点击f按钮，几秒走完
var f= document.getElementById("fk");
f.onclick = function(){
window.setInterval("yidong()",5)
}写一个yidong()的方法，移动的时候三个变量会发生变化；
左边div的宽度在增加，右边的则在减少；按钮的left也在增加；当左边增加到规定数值则停止。
注意一点在定义变量时一定要注意document获得的数据是数字还是像素；不是的话用parseInt强制转换；
function yidong(){
var l = document.getElementById("left");
var r = document.getElementById("right");
var f = document.getElementById("fk");
var lw = parseInt(l.style.width);
var rw = parseInt(r.style.width);
var fl = parseInt(f.style.left);
if(lw<800){
lw++;
rw--;
fl++;}
l.style.width = lw+"px";
r.style.width = rw+"px";
f.style.left= fl+"px";
}
</script>