鼠标移动时增加两个 div 高度

Question

我用两个 div 水平拆分浏览器页面，我想增加一个 div 的高度并使用 y 轴上的鼠标位置减少另一个 div 的高度.当我在页面的上部时，它会放大第一个 div，当我在页面底部时，它会放大第二个，但保持两个 div 的总高度等于这一页。

这是我的代码

<html><head>
<meta charset="UTF-8">
<style>
*{
    margin: 0 auto;
}
#container{
    height: 100vh
}
#alto{
    width: 100vw;
    height: 50vh;
    background-color: mediumpurple;
}
#basso{
    width: 100vw;
    height: 50vh;
    background-color: royalblue;
}
</style>
</head>
<body>
<div id="alto" onMousemove="myFunction()" ></div>
<div id="basso" ></div>
<script>
function myFunction() {
    var y = event.clientY + "px";
    document.getElementById("basso").style.height =  y ;
    }
</script>
</body>
</html>

Answer 1

看看这个。

var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");

document.onmousemove = function(event) {
  
  section1.style.height = event.clientY + 'px';
  section2.style.height = "calc(100% - "+ event.clientY + 'px';
  
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  background: gray;
  height: 100vh;
}

#section1, #section2{
  height: 50%;
  transition: all 0.1s;
}

#section1{
  background: hotpink;
}
#section2{
  background: pink;
}

<div class="container">
  <div id="section1"></div>
  <div id="section2"></div>
</div>

Answer 2

您可以单独使用 CSS 实现此效果的更简单版本（即，无需不断改变相对于鼠标位置的高度）。

工作示例：

body {
margin: 0;
padding: 0;
}

div {
width: 100vw;
height: 50vh;
margin: 0 auto;
transition: height 0.3s linear;
}

div:hover {
height: 80vh;
}

body:not(:hover) div {
height: 50vh;
}

div:not(:hover) {
height: 20vh;
}

.alto {
background-color: mediumpurple;
}

.basso {
background-color: royalblue;
}

<div class="alto"></div>
<div class="basso" ></div>

鼠标移动时增加两个 div 高度

Increase two divs height on mouse move

html

javascript

css

onmousemove