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

将此.is（）函数用于：

中的hover选择器

if(startMove){

    }

部分简单地执行此操作而没有任何麻烦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时，鼠标悬停在div上，鼠标和光标图像叠加，即startMove =“true”。并在没有悬停时删除。我已经注释了警告框;如果需要，可以将其打开

Answer 2

每当拖动光标时，您已经有一个名为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/

检测图像何时进入div？

2 个答案: