实例1
<!DOCTYPE html> <html> <head> <style type="text/css"> #container { position: absolute; border: 1px solid blue; left: 10px; top: 10px; right: 10px; bottom: 10px; } #left { position: absolute; border: 1px solid red; width: 100px; left: 0px; top: 0px; bottom: 0px; } #right { position: absolute; border: 1px solid green; right: 0px; left: 100px; top: 0px; bottom: 0px; } #hide1 { position: absolute; border: 1px solid orange; width: 10px; left: 0px; top: 0px; bottom: 0px; } #main { position: absolute; border: 1px solid cyan; right: 0px; left: 10px; top: 0px; bottom: 0px; } #main-bottom { position: absolute; border: 1px solid purple; height: 200px; right: 0px; left: 0px; bottom: 0px; } #main-top { position: absolute; border: 1px solid pink; top: 0px; right: 0px; left: 0px; bottom: 200px; } #hide2 { position: absolute; border: 1px solid orange; height: 10px; left: 0px; right: 0px; bottom: 0px; } </style> </head> <body> <div id="container"> <div id="left"> </div> <div id="right"> <div id="hide1"> </div> <div id="main"> <div id="main-top"> <div id="hide2"> </div> </div> <div id="main-bottom"> </div> </div> </div> </div> </body> </html> <script> var hide1 = document.getElementById('hide1'); var left = document.getElementById('left'); var right = document.getElementById('right'); hide1.onclick = function() { var interval = setInterval(function() { console.log(left.offsetWidth); left.style.width = left.offsetWidth - 10 + 'px'; right.style.left = left.offsetWidth + 'px'; if (left.offsetWidth < 10) clearInterval(interval); }, 100); } </script>