Увеличение высоты двух делений при перемещении мыши - PullRequest
Новая
       23

Увеличение высоты двух делений при перемещении мыши

0 голосов
/ 08 мая 2018

Я разделил страницу браузера по горизонтали на два элемента 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>

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

Вы можете получить более простую версию этого эффекта (т.е. без постоянного изменения высоты относительно положения мыши) только с помощью 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>
0 голосов
/ 08 мая 2018

Взгляните на это. 

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>
...