javascript - 检测图像何时进入 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

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

在

中使用带有 :hover 选择器的 .is() 函数

if(startMove){

    }

Section 简单地做到了这一点，is() 函数根据选择器、元素或 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 上时将边框设置为红色，鼠标和光标图像叠加在 startMove="true"上。并在它没有悬停时删除。我已经评论了警告框；如果你愿意，你可以打开它