Прозрачность Div или ширина, связанная с положением мыши

Question

Я работаю над сайтом портфолио VFX.

Я использовал прослушиватели событий (почти), синхронизируя три видео.

План состоит в том, чтобы поместить три видеодиска друг на друга, а затем, чтобы видеоизображение было видимым слева от положения мыши, видео2 было видимым справа от позиции мыши, а видео 3 видимый 50px влево и 50 пикселей справа от положения мыши, что-то вроде полосы видео.

Как это сделать?

Answer 1

Использование JQuery вы можете получить позицию мыши, как это:

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

То есть из верхней левой части окна. Поэтому вам нужно настроить его, чтобы учесть положение видео-div. Получите вот так:

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

И вы также можете получить ширину, а также позже.

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

Теперь вы можете выяснить положение мыши по отношению к левой верхней части видео:

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

С этой информацией вы должны быть в состоянии делать то, что вы хотите с видео.

Надеюсь, что вы попадете на правильный путь :)