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

Question

我正在制作VFX投资组合网站。

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

该计划是将三个视频div放在彼此的顶部，然后让video1在鼠标位置左侧可见，video2在鼠标位置右侧可见，并让video3为左边可见50像素，鼠标右边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; 
}); 

有了这些信息，你应该能够做到你想要的视频内容。

希望能让你走上正轨:)