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

Question

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

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

计划是将三个视频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;
});

根据这些信息，您应该能够通过视频完成所需的操作。

希望能让你走上正轨：）