含まれているdivの中に懐中電灯の効果を作成

Question

私はthis tutorialの懐中電灯の効果をモデリングしています。

問題は、ウィンドウの幅が実際のコンテナよりも大きい場合です。これが起こると、懐中電灯はもはやカーソルの中央に置かれなくなります。

これをよく理解するために、fiddleをご覧ください。 Fiddle

$(document).ready(function(){ 
 
    $('.content-wrap').mousemove(function(e) { 
 
    $('#flashlight').css({ 
 
     'left': e.clientX-960, 
 
     'top': e.clientY-523 
 
    }); 
 
    }); 
 
});

.content-wrap { 
 
    max-width:960px; 
 
    width:100%; 
 
    min-height: 592px; 
 
    margin:0 auto; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: blue; 
 
} 
 

 
#flashlight { 
 
    background: url(https://s3.amazonaws.com/ip-devs/AllState/keep-your-sanity/img/flashlight.png) center center no-repeat; 
 
    position:absolute; 
 
    z-index:999; 
 
    height:1046px; 
 
    width:1920px; 
 
    pointer-events:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="content-wrap"> 
 
     <div id="flashlight"></div> 
 
    </div>

Answer 1

は、私はdiv要素自体ではなく内の位置を取得する必要があります考え出しました画面には、その将来のトラブルシューティングのためにここに私の解決策を投稿：

$('.content-wrap').mousemove(function(e) { 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    $('#flashlight').css({ 
    'left': x-960, 
    'top': y-523 
    }); 
}); 

チェックJsFiddle

に

Answer 2

上 結果リンクは、ここでのトリックはオフセットを設定した値です。

.content-wrap { 
    max-width:960px; 
    width:100%; 
    min-height: 592px; 

と

'left': e.clientX-960, 
'top': e.clientY-523 

これらの値は、ハードコードされてはなりません。あなたのflashligtは、ドキュメントルートからの相対絶対的であれば、この答えで説明するように

Answer 3

、（Yについても同様）の代わりにe.clientXのe.pageXを使用します。onMouseMove get mouse position