カーソルがある距離離れているときに画像がカーソルに移動しないようにすることはできますか？

Question

私はコードを持っており、コード内に含まれているdivの端に当たった場合にのみ、画像はカーソルから離れます。入ると、カーソルは画像から一定の距離カーソルの後に画像が表示されます。だから私がしたいのは、カーソルがページのどこからでも離れているかどうかです。div内であろうとなかろうと、画像はカーソルによって見つけられるまでカーソルから離れています。これは可能ですか？

var startMove; 
 

 
$(document).mousemove(function(e){ 
 
    var difLeft = $('#image').offset().left - e.pageX; 
 
    var difTop = $('#image').offset().top - e.pageY; 
 
    if(difLeft < 10 && difLeft > -10 && difTop < 10 && difTop > -10){ 
 
     startMove = true; 
 
     $('html').removeClass('showCursor'); 
 
    } 
 
    if(startMove){ 
 
    \t $("#image").css({left:e.pageX, top:e.pageY}); 
 
    } 
 
    else{ 
 
    \t $('html').addClass('showCursor'); 
 
    } 
 
}); 
 

 
$(document).mouseleave(function(){ 
 
    startMove = false; 
 
}) 
 

 
     
 

 

 
 
     html {cursor: none;} 
 
    html.showCursor{cursor: default;} 
 
    #image{ 
 
    position:absolute; 
 
    width:25px; 
 
    height:auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 
    <img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/>

編集可能なコード：https://jsfiddle.net/3x7cgLdr/23/

Answer 1

[OK]を、私は、マウスが離れすぎて（少なくともDIFF_UNSNAP量）画像からなくなっているかどうかを確認するelse if句を追加しました。これにより、startMoveがfalseに設定されます。

var startMove; 

$(document).mousemove(function(e) { 
    var DIFF_SNAP = 10; 
    var DIFF_UNSNAP = 100; 
    var difLeft = $('#image').offset().left - e.pageX; 
    var difTop = $('#image').offset().top - e.pageY; 
    if (!startMove && Math.abs(difLeft) < DIFF_SNAP && Math.abs(difTop) < DIFF_SNAP) { 
    startMove = true; 
    $('html').removeClass('showCursor'); 
    } else if (startMove && !(Math.abs(difLeft) < DIFF_UNSNAP && Math.abs(difTop) < DIFF_UNSNAP)) { 
    startMove = false; 
    } 
    if (startMove) { 
    $("#image").css({ 
     left: e.pageX, 
     top: e.pageY 
    }); 
    } else { 
    $('html').addClass('showCursor'); 
    } 
}); 

$(document).mouseleave(function() { 
    startMove = false; 
})