1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto; padding:0px;} 6 #wai{width:800px; height:200px; margin-top:100px;} 7 #left{width:200px; height:200px; background-color:#0F3; float:left;} 8 #right{width:600px; height:200px; background-color:#36F; float:left;} 9 #anniu{width:40px; height:40px; background-color:#FFF; position:relative; top:-120px; left:-200px; text-align:center; line-height:40px; vertical-align:middle;} 10 </style> 11 </head> 12 13 <body> 14 <div id="wai"> 15 <div id="left" style="200px"></div> 16 <div id="right" style="600px"></div> 17 </div> 18 <div id="anniu" onclick="start()" style="left:-200px">>></div> 19 </body> 20 <script type="text/javascript"> 21 var a=document.getElementById("left"); 22 var b=document.getElementById("right"); 23 var c=document.getElementById("anniu"); 24 function start(){ 25 var lk=parseInt(a.style.width); 26 var rk=parseInt(b.style.width); 27 var dk=parseInt(c.style.left); 28 if(lk<600){ 29 lk++; 30 rk--; 31 dk++; 32 } 33 a.style.width=lk+"px"; 34 b.style.width=rk+"px"; 35 c.style.left=dk+"px"; 36 window.setTimeout("start()",5); 37 } 38 /*var rk=parseInt(b.style.width); //此处上面做了代码优化 39 if(rk>200){ 40 rk--; 41 } 42 b.style.width=rk+"px"; 43 var dk=parseInt(c.style.left); 44 if(dk<200){ 45 dk++; 46 } 47 c.style.left=dk+"px"; 48 window.setTimeout("start()",5); 49 }*/ 50 </script> 51 </html>