点击黄色按钮，当按钮在左侧，点击后从左向右滑动；当按钮在右侧，点击后从右向左滑动
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0 auto; padding:0;} #wai{ width:1000px; height:400px; margin-top:50px;} #left{ height:400px; background-color:#F00; float:left;} #right{ height:400px; background-color:#00F; float:left;} #btn{ width:50px; height:50px; background-color:#FF0; margin-left:0; position:relative; top:175px;} </style> </head> <body> <div id="wai"> <div id="left" style="200px;"></div> <div id="right" style="800px;"></div> <div id="btn" style="left:175px"></div> </div> </body> </html> <script type="text/javascript"> var btn = document.getElementById("btn"); var l = document.getElementById("left"); var r = document.getElementById("right"); /* 按钮在左侧点击从左向右滑动，按钮在右侧点击从右向左滑动 */ btn.onclick = function() { if(parseInt(l.style.width=200)) { bianZuo(); } if(parseInt(l.style.width=800)) { bianYou(); } } /* 从左向右滑动 */ function bianZuo() { var lw = parseInt(l.style.width); var rw = parseInt(r.style.width); var btnl = parseInt(btn.style.left); lw++; rw--; btnl++; l.style.width = lw+"px"; r.style.width = rw+"px"; btn.style.left = btnl+"px"; if(lw<800) { window.setTimeout("bianZuo()",5); } } /* 从右向左滑动 */ function bianYou() { var lw = parseInt(l.style.width); var rw = parseInt(r.style.width); var btnl = parseInt(btn.style.left); lw--; rw++; btnl--; l.style.width = lw+"px"; r.style.width = rw+"px"; btn.style.left = btnl+"px"; if(lw>200) { window.setTimeout("bianYou()",5); } } </script>
效果 