如果鼠標指針太靠近，請停止旋轉圖像

我有一個圖像根據鼠標指針移動的位置而旋轉。我試圖完成的是這個。如果指針太靠近，圖像應停止移動。如果鼠標指針太靠近，請停止旋轉圖像

這裏是一個圖像，使其更清楚一點： 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

如果鼠標指針太靠近，請停止旋轉圖像

回答

相關問題