Question

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

看看这个。

offset of m.x: 8
offset of m.x: 12

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;
}

Answer 2

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

工作示例：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

2 个答案: