效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap{
width:20px;
height:500px;
background-color:#ccc;
position:absolute;
left:100px;
top:100px;
}
#wrap div{
width:20px;
height:50px;
background-color:red;
position:absolute;
left:0;
top:0;
}
#div1{
width:400px;
height:0;
background-color:green;
position:absolute;
left:200px;
top:100px;
}
</style>
</head>
<body>
<div id="wrap">
<div></div>
</div>
<div id="div1"></div>
<script>
var aDiv=document.querySelectorAll("div");
aDiv[1].onmousedown=function(){
disY=event.pageY-aDiv[1].offsetTop-aDiv[0].offsetTop;
document.onmousemove=function(){
var newT=event.pageY-disY-aDiv[0].offsetTop;
newT=Math.max(newT,0);
newT=Math.min(newT,450);
aDiv[1].style.top=newT +"px";
// newT/450=x/500;
aDiv[2].style.height=newT*500/450 + "px";
}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
}
return false;
}
</script>
</body>
</html>