Как рассчитать позицию на основе клика в div

Question

У меня есть div с шириной 308 пикселей.В этом div у меня есть буферная строка (может быть любой длины от 0 до 308).

Div используется для отображения прогресса воспроизведения звуковой дорожки.Продолжительность звуковой дорожки в миллисекундах.

Я пытаюсь разрешить пользователю изменять положение дорожки на основе щелчка в элементе div.Однако моя математика совершенно неверна.

То, что у меня сейчас есть:

var pos = e.pageX - $(this).offset().left; // returns the position of the click in the div (0 to 380)
var relpos = parseInt(308, 10)/parseInt(pos, 10);
var newpos = parseInt(duration, 10)/parseInt(relpos, 10);

Как рассчитать новую позицию, основываясь на позиции нажатия на элемент div?

Я настроил скрипку , если вы хотите проверить это.

Answer 1

Сначала 308 - это ширина буфера, которую вы должны заменить, если вам нужно изменить размер.Код:

  (function($) {
    var duration = 138736;
    $(document).on('click', '.buffer', function(e) {
    var pos = e.pageX - $(this).offset().left;
    var relpos = duration*pos;
    var newpos = relpos/308;

    $('.test').html(pos + '/' + newpos + '/'  + duration);
  });
  })(jQuery);

, если 308 - это длительность, а pos - это x, x = (pos * duration) / 308