计算鼠标与元素之间的距离 | CSS-Tricks

(function() {
    
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);         
    });

})();

此代码将计算鼠标光标与元素中心之间的距离。这对于在鼠标距离元素一定范围内触发函数很有用。或者，您可以根据鼠标光标的接近程度来设置属性的值，例如元素的宽度、高度或不透明度。

Riderman

# 2011年12月24日

在这种情况下，点 0 是元素的中心。
元素中的任何位置的点如何为 0？
也就是说，元素的边缘会减去 a = 0

Mario

# 2012年3月2日

感谢这篇文章 - 这使得生活变得非常容易。

sadunaresh

# 2013年7月19日

你好，

我过去 3 个月一直在使用 jQuery.. 我对功能的使用非常熟悉，但从未尝试编写插件… 刚刚开始尝试上述功能.. 代码如下..

$.fn.calculateDistance = function(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));        
    };


$(document).ready(function(){


    var mX, mY, distance, $distance = $('#distance span'), $element  = $('#element');
        $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);

});

});

这样做会给我一个错误

calculateDistance is not defined

我哪里做错了？

Chris Coyier

评论永久链接# 2013年7月19日

您将其附加到 jQuery 对象 ($.fn.calculateDistance) 上，因此您必须像 $.calculateDistance 那样调用它。

或者干脆不要那样附加它。对此有不同的观点。由于您的函数在内部需要 jQuery，因此最好保留这种方式。
Tom Kiernan

评论永久链接# 2019年9月6日

在您添加的代码中，calculate distance 不是一个普通函数。它是一个 jQuery 函数，因此您必须像这样调用它。

$.calulateDistance($element, mX, mY);

Sonar

# 2014年6月25日

嗨，我想知道是否可以将元素中心移动到当前鼠标位置。有什么建议吗？

Sonar

# 2014年6月25日

http://codepen.io/sonar/pen/tABGL?editors=001

在那个例子中，我想将圆圈移动到光标当前所在的位置（意味着我想将圆圈的中心放在光标位置），当我将鼠标悬停在其上时。

你能帮我解决这个问题吗？

谢谢

Brecht

# 2014年6月30日

我试图使用此代码制作一些特殊的东西。一个计算高度到鼠标位置并结合旋转的 div。到目前为止还没有成功，但如果您有任何想法，请随时分享 :)

codepen 可以在此处找到
查看 CodePen 上的笔 Afxlz(@sugomi) 。

# 2019年6月3日

即使您向下滚动页面，这也能工作吗？因为我认为 x 和 y 在您滚动时不会保持与偏移量一致。

ankit

# 2019年10月16日

嗨…有一个很酷的光标效果，狐狸图标会朝光标方向移动，就像它在看着光标一样…

这是一个 Chrome 扩展程序，安装扩展程序后您可以在欢迎页面上看到它

ankit

评论永久链接# 2019年10月16日

我只是想知道它是如何完成的。

Mr. V

# 2021年2月3日

大家好。以防万一有人想用纯 JS 试试。

(function() {
const counter = document.createElement(‘div’);
counter.id = “distance-counter”;
counter.style = “position: fixed; width: 100px; height: 50px; background: black; color: green; top: 20%; left: 0;”
document.body.appendChild(counter);

    let mX,mY;
    let distance = document.querySelector('#distance-counter');
    let element = document.querySelector('.entry-footer');

function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft+(elem.clientWidth/2)), 2) + Math.pow(mouseY - (elem.offsetTop+(elem.clientHeight/2)), 2)));
}

document.addEventListener('mousemove',function(e) {  
    mX = e.pageX;
    mY = e.pageY;
    let nums = calculateDistance(element, mX, mY);
    distance.innerHTML = nums;        
})

})();

评论

发表评论 取消回复

发表评论取消回复