jquery - 与鼠标位置相关的 Div 不透明度或宽度

Question

我正在开发一个 VFX 投资组合网站。

我已经使用事件侦听器（几乎）同步三个视频。

计划是将三个video-div放在一起，然后让video1在鼠标位置的左侧可见，video2在鼠标位置的右侧可见，并让video3在鼠标位置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;
});

有了这些信息，您应该能够对视频做您想做的事情。

希望这能让你走上正确的轨道:)