jquery - マウス位置に関連する div の不透明度または幅

Question

私は VFX ポートフォリオ サイトに取り組んでいます。

イベント リスナーを使用して (ほぼ) 3 つのビデオを同期させました。

計画では、3 つの 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;
});

その情報を使用して、ビデオでやりたいことができるはずです。

それがあなたを正しい軌道に乗せることを願っています:)