Question

我正在尝试模拟一个音频可视化器的外观，以便在鼠标悬停时，“this”div成为最高的div，而姐妹也会改变移位高度。如何指定姐妹div应该更改为哪个高度？

代码

window.onload = window.onscroll = function() {
  var bars = document.getElementsByClassName('bar');
  [].forEach.call(bars, function(bar) {
    bar.style.height = Math.random() * 50 + '%';
  });
}

.bars {
  position: fixed;
  top: 30px;
  right: 0;
  bottom: 40px;
  left: 0;
  margin: 10px auto;
  text-align: center
}

.bars::before {
  content: "";
  display: inline-block;
  height: 100%;
}

.bar {
  display: inline-block;
  vertical-align: bottom;
  width: 4rem;
  height: 25%;
  margin-right: .75em;
  background: #333;
  -webkit-transition: height 0.5s ease-out;
  transition: height 0.5s ease-out;
}

<div class="container">
  <div class="bars">
    <div class="bar" id="barOne"></div>
    <div class="bar" id="barTwo"></div>
    <div class="bar" id="barThree"></div>
    <div class="bar" id="barFour"></div>
    <div class="bar" id="barFive"></div>
  </div>
</div>

感谢您的帮助！

Answer 1

这是一个小提琴，应该让你指向正确的方向：https://jsfiddle.net/8p2yvro9/7/

let container = document.getElementsByClassName('container')[0];
let bars = document.getElementsByClassName('bar');

[].forEach.call(bars, bar => {
  bar.addEventListener('mouseover', function() {
    shiftBars(bar);
  });
});

function shiftBars(barOver) {
  [].forEach.call(bars, function(bar) {
    bar.style.height = Math.random() * 50 + '%';
  });
  barOver.style.height = '100%';
}

鼠标悬停的姐妹div的JavaScript style.height

1 个答案: