可视区域里,有顶部固定的区域,下边有两个盒子,通过鼠标拖动让两个盒子高度改变,不要改变body的高度,并且下边盒子可以切换隐藏和显示
代码是这样的
注意:需要引入jquery.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖动改变盒子高度</title>
</head>
<body style="overflow: hidden;">
<div style="font-size:30px;box-sizing: border-box;text-align: center;padding: 10px;">
<div style="border: 1px solid #ccc;background:#bbb;height: 50px;">头部固定区</div>
<div style="border: 1px solid #ccc;background:#eee;min-height: 100px;overflow-y:auto;" id="TopBox">
中间滚动区
<div>111</div><div>111</div>
<div>222</div><div>222</div>
<div>333</div><div>333</div>
<div>444</div><div>444</div>
<div>555</div><div>555</div>
<div>666</div><div>666</div>
<div>777</div><div>777</div>
<div>888</div><div>888</div>
<div>999</div><div>999</div>
</div>
<div style="border: 1px solid #ccc;background:skyblue;height: 100px;" id="box">
<div id="box_1" style="height:8px;border-bottom:1px solid #d8d7d7;color:#666;line-height: 8px;">
<b class="upIcon" style="font-size: 4px;line-height: 8px;cursor:pointer;width:30px;margin: auto;display: block;display: none;">▲</b>
<b class="downIcon" style="font-size: 4px;line-height: 8px;cursor:pointer;width:30px;margin: auto;display: block;">▼</b>
</div>
<div style="overflow-y:auto;height: 96%;">
底部隐藏区
<div>111</div>
<div>222</div><div>111</div>
<div>333</div><div>222</div>
<div>444</div><div>333</div>
<div>555</div><div>444</div>
<div>666</div><div>555</div>
<div>777</div><div>666</div>
<div>888</div><div>777</div>
<div>999</div><div>888</div>
<div>000</div><div>999</div>
</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script>
var Height = document.documentElement.clientHeight //屏幕可视高度
var TopBox = document.getElementById('TopBox')
TopBox.style.height = (Height - TopBox.offsetTop - 120) + 'px'
function move(){
$(document).mousemove(function(event){
var y=event.clientY;
var Box = document.getElementById('box')
var TopBox = document.getElementById('TopBox')
var TopBox_h = TopBox.offsetHeight
if(Height - y <= 100){
TopBox.style.height = (Height - TopBox.offsetTop -120) + 'px'
}else{
TopBox.style.height = (y - TopBox.offsetTop) + 'px'
Box.style.height = (Height - TopBox_h - TopBox.offsetTop - 20) + 'px'
}
})
}
$("#box_1").mouseover(function(event){
var box_h = document.getElementById('box').style.height
var box_hh = box_h.slice(0,box_h.length-2)
if(box_hh > 10){
document.getElementById('box').style.cursor = 'n-resize'
}
});
$("#box_1").mouseout(function(event){
document.getElementById('box').style.cursor = 'auto'
});
$("#box_1").mousedown(function(event){
var box_h = document.getElementById('box').style.height
var box_hh = box_h.slice(0,box_h.length-2)
if(box_hh > 10){
move()
}
});
$(document).mouseup(function(event){
$(document).unbind("mousemove");
});
$('.upIcon').click(function(){
var box = document.getElementById('box')
var TopBox = document.getElementById('TopBox')
box.style.height = '200px'
TopBox.style.height = (Height - TopBox.offsetTop - 200) + 'px'
document.querySelector('.upIcon').style.display = 'none'
document.querySelector('.downIcon').style.display = 'block'
})
$('.downIcon').click(function(){
var box = document.getElementById('box')
var TopBox = document.getElementById('TopBox')
box.style.height = '10px'
TopBox.style.height = (Height - TopBox.offsetTop - 10) + 'px'
document.querySelector('.upIcon').style.display = 'block'
document.querySelector('.downIcon').style.display = 'none'
})
</script>
</body>
</html>
javascript