- 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>
来源: http://www.bubuko.com/infodetail-2133227.html