男孩，這是很難給這個問題一個名字......距離測量邏輯
我一直對這個「進度條」的邏輯，即當過用戶移動 他/她的鼠標 - 指標（在這種情況下，它的進度條）顯示光標與想要的對象有多接近。
基本上這就像是「熱」，冷「的東西。
這裏的fiddle
...這是問題的一部分
relativeDistance = ((maxMouseDistance - distance)/maxDistance);
if ((maxMouseDistance - distance) > maxDistance){
relativeDistance = 1- (((maxMouseDistance)/maxDistance) -1);
}
由於我的代碼和距離測量是基於三角學，它有一個小問題：這事實上是ATLEAST兩點屏幕，所需距離相等。
試試看，你會發現我的意思。
關於如何擺脫這個問題的任何想法......這可能是因爲邏輯，但我只是沒有看到它。
請問jsFiddle是做你想做的嗎？
它使用鼠標最近的角落而不是最遠的角落。當鼠標位於任何角落時，它會顯示0％，而鼠標接近目標時顯示正的百分比，即使目標是偏離中心的。
(function() {
var mX
, mY
, distance
, $distance = $('#distance')
, $element = $('#thetarget')
, maxMouseDistance
, relativeDistance;
var theWidth = $(document).width();
var theHeight = $(document).height();
$("#theWidth").text(theWidth);
$("#theHeight").text(theHeight);
function pythagoras(length, height) {
var length2 = length * length
, height2 = height * height
return Math.sqrt((length2 + height2));
}
/**/
var target = $("#thetarget");
target.css({
cursor: "default"
, border: "1px solid black"
, margin: 0});
var position = target.position(); // top left of target element
var tX = Math.floor(position.left)
var tY = Math.floor(position.top)
$("#targetPosition").text(tX + ":" + tY);
var corners = [
[0, 0]
, [theWidth, 0]
, [theWidth, theHeight]
, [0, theHeight]
]
function distanceToNearestCorner(x, y) {
var cornerX = x < tX ? 0 : theWidth
var cornerY = y < tY ? 0 : theHeight
return pythagoras(cornerX - tX, cornerY - tY)
}
/*Mouse movement tracking*/
$(document).mousemove(function (e) {
/*Get mouse coordinates*/
mX = e.pageX;
mY = e.pageY;
/*calculate distance between mouse and element*/
distance = pythagoras(tX - mX, tY - mY);
maxMouseDistance = distanceToNearestCorner(mX, mY)
relativeDistance = ((maxMouseDistance - distance)/maxMouseDistance);
$distance.text(distance);
var decimals = distance/100;
var percents = 100 - (distance/100);
$("#mouse").text(mX + ":" + mY);
//$("#distanceDecimals").text(decimals);
//$("#dFarCorner").text(maxDistance);
$("#md2FarCorner").text(maxMouseDistance);
$("#formula").text("(E to C max/M to C max)/(M to E distance/100)");
$("#theNumber").text(relativeDistance);
$('.fill').width((relativeDistance * 100) + "%");
});
})();
它不會更新所有字段，但它會更新進度欄。
原來的答覆
你似乎有很多的功能，在那裏它們不會被調用。
這裏有一個，我已經重寫了...但它不會被調用：
function calculateDistance(elem, mouseX, mouseY) {
var deltaX = elem.offset().left - mouseX;
var deltaY = elem.offset().top - mouseY;
var delta2 = deltaX * deltaX + deltaY * deltaY;
var delta = Math.floor(Math.sqrt(delta2))
return delta
}
var elem = document.getElementById("targetPosition")
var relativeDistance = calculateDistance(elem , mX, mY)
在我的實現，elem是你認爲的目標的HTML元素。我的函數是畢達哥拉斯定理的一個應用：它返回沿x軸和y軸的目標距離的一些距離的平方根，給出鼠標和目標之間最短線的長度。
當我將此插入到jsFiddle中時，當光標位於「目標」的「T」上方時，M2E距離字段中會出現0。
這是你在找什麼？
感謝您的回答。實際上，我已經通過_calculateDistanceToCorners_的名稱得到了Pythagoras'A^2 * B^2 = C^2子句，並且當我設置最遠的拐角時它被調出。我可以得到光標和目標之間的距離很好，但如果我想獲得百分比結果，我必須將它與某些東西進行比較。這就是爲什麼我必須 - 按照我的理解 - 將距離與其他東西的距離相比較，在這種情況下，它可能/應該是距元素最遠的點。所以我的問題不清楚，或者我理解你錯了。 – Shamppi
隨着您的實施，當目標位置和鼠標位置顯示爲相同時，M2E距離爲正數（例如45）...讓我以完整的解決方案回覆您。 –
神聖莫里多數民衆贊成好！謝謝！ – Shamppi
感謝您的回答。我必須承認，正如你的暱稱 - 是我的一個謎語。 – Shamppi
...在一個平面上有一個與點相同距離的點的名稱。它被稱爲一個圓圈。除此之外：有點與你感興趣的點相差太遠，這是錯誤的嗎？ – Burki
爲什麼不簡單地取目標中心的座標並計算鼠標指針和中心之間的距離。然後你可以用百分比表示這個距離。 – rashmatash
感謝這兩個評論。 @Burki，我的觀點是隻有當光標位於某個目標元素上時，才能填充該條。你會如何建議我用圓來衡量從光標到目標的百分比距離？ – Shamppi