实例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>
时间： 2024-08-29 22:44:47