Question

我陷入了一个问题并尝试了很多但无法得到解决方案。

发生的事情是，有一个mp3播放器，在该播放器下面有一个条带，用于根据mp3进度保存图片（来自用户的评论）。

当播放器的进度条到达图像的开头时，它会向图像广告“活动”类，以便人们可以看到此时此用户发表了评论。

现在我面临的问题是，在01:46有两个图像相互重叠，由于这个重叠，javascript正在为我不想要的两个图像添加活动类，我想要进度条到达第一个图像的开始它将使其激活但是一旦第二个图像开始（重叠），第二个图像就会激活，这样一次只有一个活动。与soundcloud评论一样。

无论第一个图像持续时间是否会更少，但这是我想要实现的，因为这些图像将是动态的，用户可以选择他们想要评论的位置，我无法将特定类别赋予重叠图像，所以需要通过javascript来完成，我被严重困扰。

因为现在有两个重叠，但将来它可能是三个四重叠或多少重叠所以我想要一个效果，当我们在这些图像上从左到右移动鼠标如何使图片处于活动状态时作为第二个图片成为活跃的焦点，我希望它成为那样。

任何专家都可以帮我解决这个问题吗？

我正在使用此功能获取进度条的左侧位置符合图像以添加“活动”类，当图像宽度结束时将删除活动类

$(document).ready(function() {

 function highlightImg(progress){
 progress = parseFloat(parseFloat(''+progress).toFixed(1));
    var imgs = $('img.comment');
    imgs.map(function (i, im)
    {   
      var img = $(im);
      var currentImgLeftPos = parseFloat(parseFloat(im.style.left).toFixed(1));
      var currentImgRightPos = $(this).width() / $(this).parent().width() * 100;
      console.log(progress);
      console.log('left' ,currentImgLeftPos);
      img.removeClass('active'); // remove active from other images
            if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos  ) {
                $('#imgwidimg').text('this'+currentImgRightPos);
        img.addClass('active'); // add the class when needed
      }
    }
  );
}

使用此功能我正在进行jplayer进度更新

$('#jquery_jplayer_2').on($.jPlayer.event.timeupdate, function(e){
   var progress = document.querySelector('.jp-play-bar').style.width;
   highlightImg(progress);
});

Here's a fiddle证明了这个问题。

Answer 1

请试试这个。

 if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos  ) {
                $('#imgwidimg').text('this'+currentImgRightPos);
        imgs.removeClass("active");  //add this line to your code
        img.addClass('active'); // add the class when needed
      }

如果两个div在同一位置被过度重叠，那么如何一次添加一个类

1 个答案: