마우스 위치와 관련된 div 불투명도 또는 너비

Question

VFX 포트폴리오 사이트에서 일하고 있습니다.

나는 (거의) 3 개의 비디오를 동기화하기 위해 이벤트 리스너를 사용했습니다.

3 개의 비디오 div를 서로 겹쳐 놓은 다음 video1을 마우스 위치 왼쪽에 표시하고 video2를 마우스 위치 오른쪽으로 볼 수있게하고 비디오 3을 왼쪽에서 50px, 마우스 위치에서 오른쪽으로 50 픽셀 보이며 비디오와 같습니다.

어떻게해야합니까?

$('div').bind('mousemove',function(e){ 
    videoX = e.pageX; 
}); 

창 상단 왼쪽에서입니다 : jQuery를 사용

Answer 1

는이 같은 마우스 위치를 얻을 수 있습니다. 따라서 비디오 div의 위치를 ​​고려하여 조정해야합니다. 이렇게 얻으세요 :

var videoOffset = $('video').offset().left; 

그리고 너는 나중을 위해 너비를 얻을 수도 있습니다.

var videoWidth = $('video').width(); 

지금 당신은 비디오의 왼쪽 상단에 마우스의 위치를 ​​알아낼 수 있습니다

$('div').bind('mousemove',function(e){ 
    videoX = e.pageX - videoOffset; 
}); 

을 당신이 비디오와 함께 원하는 것을 할 수 있어야 정보와 함께.

바른 길에서 당신을 얻으려는 희망 :