다른 div 너비가 해당 위치에 도달하는 경우 요소에 클래스를 추가하는 방법

Question

나는 무엇인가 붙어있어서 도움이 필요하다. 나는 javascript 함수를 알아 내려고 노력했지만 쉽고 가벼운 무게 공식으로 얻을 수 없다. cms에서 사용하십시오.

나는 노래의 진행률 표시 줄이 있습니다. 진행 막대 아래에 이미지가 포함 된 스트립이 있고 그 이미지에도 호버 효과가 있습니다. 위의 진행 상황이 다른 사람에게 도달하면 아래의 이미지 위치에 광고가 표시되고 이미지에 활성 클래스가 있고 클래스가 제거됩니다. 그것이 이미지의 끝을 지나친 직후. 일하는 선수를 위해 바이올린을 확인하십시오.

#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); 
 
}

<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>

나는 사운드 클라우드 같은 것을 추구하고는 댓글 시스템에 않습니다.

나는 정말로이 문제에 빠져있어 가벼운 무게와 간단한 해결책을 찾고있다. 왜냐하면 comment id는 데이터베이스에서 올거야, 나는 js 함수에 매뉴얼 ID를 쓸 수 없기 때문이다.

이 클래스 "JP 플레이 바는"이미지에 바닥이 광고 클래스 "활성"의 이미지의 시작에 도달하고 이미지의 끝에 도달 할 때 활성 클래스를 제거 할 때 내가 원하는

사전 여기

에서

덕분에 당신은 때마다이 함수를 진행 표시 줄 변경을 호출 한 다음 이미지의 왼쪽 위치에 진척 바의와 비교 기능을 사용하고 가지고 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/