<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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{ 100%; height:500px;} #left{height:500px; background-color:#63C; float:left} #right{ height:500px; background-color:#FC3; float:left} #anniu{ 50px; height:50px; background-color:#F30; position:absolute; top:225px; z-index:10; } #anniu:hover{ cursor:pointer} </style> </head> <body> <div id="wai"> <div id="left" style="200px"></div> <div id="right" style="800px"></div> </div> <div id="anniu" style="left:175px" onclick="hua()"></div> <script type="text/javascript"> var id; function hua() { id = window.setInterval("dong()",10); } //滑动的方法，调一次滑动3px function dong() { //改蓝色的宽度 200px var zuo = document.getElementById("left"); kd = zuo.style.width; if(parseInt(kd.substr(0,kd.length-2))>=800) { window.clearInterval(id); return; } kd = parseInt(kd.substr(0,kd.length-2))+3; zuo.style.width = kd+"px"; //改黄色的宽度 var you = document.getElementById("right"); ykd = you.style.width; ykd = parseInt(ykd.substr(0,ykd.length-2))-3; you.style.width = ykd+"px"; //改红色的left var hong = document.getElementById("anniu"); hleft = hong.style.left; hleft = parseInt(hleft.substr(0,hleft.length-2))+3; hong.style.left = hleft+"px"; } </script> </body> </html>
运行结果：
点击红色区域后：
最后结果：
