圖像進入div時檢測？

Question

我正在創建一個迷宮遊戲，並且我想要檢測遊標後面的圖像何時達到某個div，終點。我有鼠標後面的圖像，並且我有圖像所在的容器。當圖像到達div時，我想要觸發某個東西，讓我們說一個警報。我怎樣才能做到這一點？

 

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

 

 
 
     html {cursor: none;} 
 
    html.showCursor{cursor: default;} 
 
    #image{ 
 
    position:absolute; 
 
    width:25px; 
 
    height:auto; 
 
    } 
 
div{ 
 
margin-left: 500px; 
 
width: 200px; 
 
height: 50px; 
 
background-color: green; 
 
}

<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"/> 
 
<div></div>

的jsfiddle：https://jsfiddle.net/3x7cgLdr/25/

Answer 1

你已經有一個名爲startMove標誌，是活動的，只要將光標拖動，按如下方式使用目標DIV MouseEnter事件：

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){ 
     $("#image").css({left:e.pageX, top:e.pageY}); 
    } 
    else{ 
     $('html').addClass('showCursor'); 
    } 
}); 

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

$("#drop").mouseenter(function(){ 
if(startMove) 
    alert("Success"); 
}); 

。

<img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png"/> 

<div id="drop"> 
</div> 

。

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

#drop{ 
    width:100px; 
    height:100px; 
    background:green; 
    position: absolute; 
    left:200px; 
    top: 300px; 
    z-index:99 
} 

看到一個演示：https://jsfiddle.net/hycd913y/

Answer 2

 if ($('#TargetDiv').is(':hover')) { 
    // alert('hello'); 
    $("#image").addClass("red"); 
    }else{ 
    $("#image").removeClass("red"); 
    } 

使用這個。是（）函數：在

if(startMove){ 

    } 

科內懸停選擇乾脆不說，沒有任何麻煩的是（）函數根據選擇器，元素或jQuery對象檢查當前匹配的元素集，如果這些元素中至少有一個匹配給定的參數，則返回true。

.is() function documentation

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) { 
 
    $("#image").css({ 
 
     left: e.pageX, 
 
     top: e.pageY 
 
    }); 
 
    if ($('#TargetDiv').is(':hover')) { 
 
     // alert('hello'); 
 
     $("#image").addClass("red"); 
 
    } else { 
 
     $("#image").removeClass("red"); 
 
    } 
 
    } else { 
 
    $('html').addClass('showCursor'); 
 
    } 
 
}); 
 

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

html { 
 
    cursor: none; 
 
} 
 
html.showCursor { 
 
    cursor: default; 
 
} 
 
#image { 
 
    position: absolute; 
 
    width: 25px; 
 
    height: auto; 
 
} 
 
#TargetDiv { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: green; 
 
    margin: 100px auto; 
 
} 
 
.red { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<img id="image" src="http://static.micheljansen.org/uploads/mac-osx-arrow-cursor.png" /> 
 

 

 
<div id="TargetDiv"> 
 

 
</div>

我添加了一個類邊境紅色設置爲div時徘徊在鼠標和光標圖像的DIV疊加是startMove =「真」。並且在不徘徊時移除。我已評論警告框;如果您想要，可以打開它。