在鼠标移动时增加两个 div 的高度答案

【问题标题】：Increase two divs height on mouse move在鼠标移动时增加两个 div 的高度
【发布时间】：2018-05-08 16:25:39
【问题描述】：

我用两个 div 水平分割浏览器的一个页面，我想增加一个 div 的高度并使用 y 轴上的鼠标位置在另一个中减小它。当我在页面的上部时它会放大第一个 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>

【问题讨论】：

onmouseover 增加高度，onmouseout 恢复高度。您可以通过在示例中操作样式来实现此目的，但应该使用单独的 CSS 样式。
您好，回答对您有用吗？

标签： javascript html css onmousemove

【解决方案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>

【讨论】：

我的目标是使用 event.clientY 作为参数来改变相对于鼠标位置的高度
@mattia 现在更新了答案，它需要的代码比以前更少。
哇，太好了，谢谢...除了它应该是相反的，当我在一个 div 上时它应该增加它的高度
我认为你需要function(event) 而不是简单的function() - 否则它在 Firefox 中不起作用。
@Rounin 是的，确实，我没有在 Firefox 上测试它，我在某些时候想到它是如何在没有事件的情况下工作的，但由于它在 Chrome 中工作，我没有打扰进一步调查。谢谢。

【解决方案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>

【讨论】：

这是我之前提供的方式，但 OP 不希望这样，然后我更新了我的答案。