不透明度或寬度與鼠標位置相關

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; 
}); 

有了這些信息，你應該能夠做到你想要的視頻內容。

希望能讓你走上正軌:)