<style type="text/css">
*{
margin:0px auto;}
#kuang{
height:50px;
border:1px solid #000}
#yanse{
height:50px;
background-color:red;
float:left;}
</style>
</head>
<body>
<div id="kuang" style="400px;"> 内联，不然下边获取不到宽度
<div id="yanse" style="0px;"></div>
</div>
</body>
<script type="text/javascript">
window.setTimeout("Zou()",20); 间隔
function Zou()
{
var y = document.getElementById("yanse");
var k = document.getElementById("kuang");
var w = y.style.width; 定义颜色的宽
var kw = k.style.width; 定义框的宽
var wc = parseInt(w); 整形取整
var kc = parseInt(kw);
var wc = parseInt(w.substr(0,w.length-2)); 不用整形的时候可以用这个，
字符串需要转整形 substr截取字串 ， 0是初始位置开始截，总长度-px就是总长度-2
if(wc<400) 判断颜色的宽度小于颜色的宽度一直+2
{
wc =wc+2;
y.style.width = wc+"px";
window.setTimeout("Zou()",20); 自己调自己
}
}
</script>
滑动效果：
点击黑色按钮让红色滑动，到和红色一样的宽度
<style type="text/css">
#kuang{
800px;
height:300px;
}
#zuo{
height:300px;
background-color:red;
float:left;}
#you{
height:300px;
background-color:blue;
float:left;}
#an{
50px;
height:50px;
background-color:#000;
position:absolute; 绝对定位
top:125px;
}
</style>
</head>
<body>
<div id="kuang">
<div id="zuo" style="200px;"></div>
<div id="you" style="600px;"></div>
</div>
<div id="an" onclick="Zou()" style="left:180px;"></div>
</body>
<script type="text/javascript">
var id; 最外边定义的变量，两个都可以使用
function Zou()
{
执行间隔语句
id = window.setInterval("Jin()",20); id=，下边清间隔
}
调起的函数
function Jin()
{
改变红色的宽度
var zuo = document.getElementById("zuo");
var zw = zuo.style.width;
截取字符串
var zc = parseInt(zw.substr(0,zw.length-2));
if(zc>=600)
{
window.clearInterval(id); 清间隔，因为判断条件太多
return; 跳出函数 所以直接清，条件满足时，下边
} 的就不走了
zc = zc+2;
zuo.style.width = zc+"px";
蓝色的宽度
var you = document.getElementById("you");
var yw = you.style.width;
var yc = parseInt(yw.substr(0,yw.length-2));
yc = yc-2;
you.style.width = yc+"px";
黑色的位置
var an = document.getElementById("an");
var al = an.style.left;
var ac = parseInt(al.substr(0,al.length-2));
ac = ac+2;
an.style.left = ac+"px";
}
</script>