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="width:200px"></div>
16 <div id="right" style="width: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>
