Question

我有一个根据鼠标指针移动位置旋转的图像。我想要完成的是这个。如果指针太靠近，图像应该停止一起移动。

这是一张让它更清晰的图像： enter image description here

以下是旋转代码：

$(window).on('mousemove', function (e) {

      //Current position
      var p1 = {
        x: player.offset().left,
        y: player.offset().top
      };     
      //Future position
      var p2 = {
        x: e.offsetX,
        y: e.offsetY
      };

      //Angle between them in degrees
      var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
      angleDeg -= 90;
        //Animate the whole thing
         player.css('-webkit-transform', 'rotate(' + angleDeg + 'deg)');
    });

Heres是我迄今为止尝试过的，但没有成功：

function tooClose(object1, object2){
    if (object1.x < object2.x && object1.x + object1.width  > object2.x &&
    object1.y < object2.y && object1.y + object1.height > object2.y) {
        return true;
    }
}

Full fiddle here

谢谢！

Answer 1

这是固定的jsFiddle

主要问题是您的第二点是使用e.offsetX和e.offsetY - 当您“接近”图像时，或者换句话说您在图像上时，这些结果会产生意外结果，并且你得到e.offsetX相对于图像而不是屏幕。你想要的是每次获得绝对屏幕值。

更改行：

var p2 = {
    x: e.offsetX,
    y: e.offsetY
  };

到此：

var p2 = {
    x: e.clientX,
    y: e.clientY
  };

修正了这个问题。

我也冒昧地修理偏移旋转枢轴。首先，图像是动态定位的 - 因此它的位置会发生变化，您也会使用它的左上角作为中心。为了解决这些问题，我将其放入容器中，并使用容器的中心作为枢轴。（见jsFiddle）。

Answer 2

您可以使用鼠标位置和图像中心之间的欧几里德距离：http://en.wikipedia.org/wiki/Euclidean_distance

一旦你到达距离，当它小于一个给定的阈值时，做你需要的功能（在你的情况下我觉得'停'）。

Answer 3

您可以检查图像是否正在悬停。

// Declare the hover checking function...
function idIsHovered(id){
    return $("#" + id + ":hover").length > 0;
}

// Check if the picture is being hovered
if(!idIsHovered('player')){
    // If not: do your thing.
}

这是一个DEMO。

注意：“检查悬停”功能来自this answer

Answer 4

使用此功能：

function Distance( p1, p2 ){
    var x,y = 0;
    x = p2.x - p1.x;
    x = x * x;
    y = p2.y - p1.y;
    y = y * y;
    return Math.sqrt( x + y );
}

Fiddle

当你正好在车上时，还是有点摇摆。不要喝酒，开车和编码！

啊，@ MeLight已经确定了。指定司机！

如果鼠标指针太近，请停止旋转图像

4 个答案: