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){
    	$("#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;
    }

<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

好的，我添加了一个else if子句，用于检查鼠标是否从图像中消失得太远（至少DIFF_UNSNAP个量）。这会将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;
})

当光标距离一定距离时，图像是否可以不移动到光标？

1 个答案: