Question

我陷入困境，需要你的帮助，我一直试图找出一个javascript功能，但我无法使用简单轻量的公式来cms使用。< / p>

我有一首歌曲的进度条。在进度条下面有一个包含图像的条带，这些图像也有悬停效果，我想如果上面的进展到达下面的任何人的图像位置剥离广告和活动类到图像并删除该类在它通过图像的结尾之后。请检查工作球员的小提琴。

＆＃13;

#containment-wrapper2 {
  width: 100%;
  height: 30px;
  background: #aaa;
}

#progress {
  background: #000;
  height: 30px;
}

#containment-wrapper {
  width: 100%;
  height: 30px;
  background: #eee;
}

.comment {
  background: #000;
  position: absolute;
}

.comment:hover,
.comment.active {
  background: red;
  transform: scale(1.5);
}

＆＃13;

<div id="containment-wrapper2">
  <div id="progress" style="width:41.2%;"></div>
</div>


<div id="containment-wrapper" style="width:100%; height:30px; background:#eee;">

  <img id="coment1" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style=" left:46.3%;" />
  <img id="coment2" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:26.3%;;" />
  <img id="coment3" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:36.3%;" />
  <img id="coment4" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:51%;" />
  <img id="coment4" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:51.6%;" />
  <img id="coment5" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:38%;" />
  <img id="coment6" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:21%;" />
  <img id="coment7" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:6.3%;" />
  <img id="coment8" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:12.6%;" />
  <img id="coment9" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:90%;" />
  <img id="coment10" class="comment" src="http://cdn.wpbeginner.com/wp-content/uploads/2012/08/gravatarlogo.jpg" width="20" height="20" style="left:70%;" />

</div>

</div>

＆＃13;

我在其评论系统中寻找类似soundcloud的内容。

我真的陷入了这种困境，并寻求一种轻量级和简单的解决方案，可以动态地工作，因为评论ID将来自数据库，我不能写手册id到任何js功能

我想要这个班级＆＃34; jp-play-bar＆＃34;到达底部的图像的开头广告类＆＃34;活跃＆＃34;对于图像，当它到达图像的末尾时，它会删除活动类

提前致谢

这是 fiddle

Answer 1

您使用的功能将进度条的显示与图像的左侧位置进行比较，然后每次进度条更改时调用此功能。您可以在事件timeupdate上调用此函数，以确保进度条正在更改：

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

现在是highlightImg函数：

function highlightImg(progress){    
  progress = parseFloat(parseFloat(''+progress).toFixed(1)); // normalize the values to be compared easily
  var imgs = $('img.comment');
  imgs.map(function (i, im)
    {   
      var img = $(im);
      var currentImgLeftPos = parseFloat(parseFloat(im.style.left).toFixed(1)); // get the left position of the current image
      console.log(progress); // logs the progress bar width
      console.log('left' ,currentImgLeftPos); // logs the left postion of the images
      img.removeClass('active'); // remove active from other images
            if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + 3  ) { // I just added an interval where the images can be shown otherwise the effect will very quick
        img.addClass('active'); // add the class when needed
      }
    }
  );
}

希望这会有所帮助。我还更新了你的小提琴：http://jsfiddle.net/XLNCY/22626/

如果另一个div宽度到达其位置，如何将类添加到元素

1 个答案: