滑动效果：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0px auto; padding:0px;} #wai{ 1000px; height:500px; margin-top:30px;} #left{ height:500px; background-color:#F00; float:left} #right{height:500px; background-color:#0F0; float:left} #btn{ 50px; height:50px; background-color:#00F; position:relative; margin-left:0px; top:225px; } </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 st; btn.onclick = function() { st = window.setInterval("jia()",10) } function jia() { var left = document.getElementById("left"); var right = document.getElementById("right"); var btn = document.getElementById("btn"); var rwidth = parseInt(right.style.width); var lwidth = parseInt(left.style.width); var lbtn = parseInt(btn.style.left); if(lwidth<1000){ lwidth++; rwidth--; lbtn++; btn.style.left=lbtn+"px"; left.style.width=lwidth+"px"; right.style.width=rwidth+"px"; }else{ window.clearInterval(st);} } </script>
效果图：
