Question

男孩很难给这个问题起个名字......

我一直致力于这个＆＃34;进度条＆＃34;逻辑，当用户移动时他/她的鼠标 - 指示器（在这种情况下是其进度条）显示了光标与所需对象的接近程度。

基本上它就像＆＃34;热的＆＃34;寒冷＆＃34;那种事。

这里是fiddle

......这是问题部分

relativeDistance = ((maxMouseDistance - distance) / maxDistance);

        if ((maxMouseDistance - distance) > maxDistance){
             relativeDistance = 1- (((maxMouseDistance) / maxDistance) -1);
        }

由于我的代码和距离测量基于三角学，因此它有一个小问题：屏幕上实际上至少有两个点，其中所需距离相等。

试一试，你会注意到我的意思。

关于我如何能摆脱这种想法的任何想法......这可能是因为逻辑，但我只是没有看到它。

Answer 1

这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时，当我的光标位于＆＃34; T＆＃34;之上时，我看到M2出现在M2E距离字段中。＆＃34;目标＆＃34;。

这是你在找什么？

Answer 2

你的逻辑是正确的。它被称为轨迹。 http://www.bbc.co.uk/schools/gcsebitesize/maths/geometry/locirev1.shtml

距离测量逻辑

2 个答案: