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

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

这里是一个图像，使其更清楚一点： 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)'); 
    });

继承人是我到目前为止已经试过，但没有奏效出：

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

谢谢！

来源

2013-11-26 Nilzone-

这里的固定jsFiddle

的主要问题是，你的第二个点是用e.offsetX和e.offsetY - 这给了意想不到的效果，当你“接近”的形象，或者换句话说，你的图像上，而你得到的e.offsetX相对于图片不是屏幕。你想要的是每次获得绝对屏幕值。

更改线路：

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

这样：

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

修正这个问题。

我也自由地修复了偏移旋转轴。首先，图像是动态定位的 - 因此它的位置发生变化，您也将其左上角作为中心。为了修复那些我把它放在一个容器中，并使用容器的中心作为枢轴。（见jsFiddle）。

来源

2013-11-26 15:14:25 MeLight

这确实做到了！谢谢！ –

如果你删除了'-webkit -'，这可以在Chrome和Firefox中使用;） – core1024

@ core1024 -webkit-用于Chrome和Safari。 -moz-是为火狐:) –

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

一旦你的距离，当小于给定的阈值时，你需要的功能（我认为'停止'在你的情况）。

来源

2013-11-26 15:14:04 QuarK

你可以检查图像是否被徘徊。

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

来源

2013-11-26 15:22:38

使用此功能：

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固定的媒体链接。指定的司机！

来源

2013-11-26 15:30:30 mainguy

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

回答

相关问题