在图像顶部绘制垂直线

Question

我为我的博客写了一个小的Soundcloud播放器。我刚刚添加了在波形内部单击时跳过的可能性。现在，我想在轨道的当前位置绘制一条线，并在文本中指示当前的位置。

我如何在我的波形（这是一个<img> - 标签）上绘制这个，我会使用哪些元素？

Answer 1

你可以这样做。绝对定位的元素（你选择的元素并不重要 - div似乎是我最好的逻辑选择）出现在图像的顶部，并且可以轻松滚动。您使用left属性表示条形位置。对于您的图像，它介于48px和358px之间。见这里：

＆＃13;

＆＃13;

function play() {
  document.getElementById('pos').className = 'end';
}

＆＃13;

#c {
  position: relative;
  }
#pos {
  height: 50px;
  width: 1px;
  position: absolute;
  left: 48px;
  top: 1px;
  background: red;
  transition: left 5s linear;
}
#pos.end {
  left: 358px;
}

＆＃13;

<div id="c">
  <div id="pos"></div>
  <img src="http://i.stack.imgur.com/LUNV8.png" />
</div>
<button onclick="play()">Play</button>

＆＃13;

＆＃13;

＆＃13;

---

将它与现有的波形监听器结合起来也很简单：

＆＃13;

＆＃13;

var pos = document.getElementById('pos');
var wave = document.getElementById('wave');

wave.addEventListener('click', function(e) {
  if (e.offsetX < 48)
    return;
  pos.style.left = e.offsetX + 'px';
});

＆＃13;

#c {
  position: relative;
}
#pos {
  height: 50px;
  width: 1px;
  position: absolute;
  left: 48px;
  top: 1px;
  background: red;
}

＆＃13;

<div id="c">
  <div id="pos"></div>
  <img id="wave" src="http://i.stack.imgur.com/LUNV8.png" />
</div>

＆＃13;

＆＃13;

＆＃13;