例子：滑动效果

<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{ width: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>

 

<div style="width:1000px; height:600px">

<div id="left" style="width:200px;"> <div id="btn" onclick="Bian()" style="left:185px;">-></div> </div> <div id="right" style="width:800px;"> </div>

 

</div>

 

 

<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>