(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);
});
})();
此代码将计算鼠标光标和元素中心之间的距离。 当鼠标在元素的一定距离内时,这对于触发功能很有用。 或者,您可以将属性的值(例如元素的宽度,高度或不透明度)基于鼠标光标的附近。
翻译自: https://css-tricks.com/snippets/jquery/calculate-distance-between-mouse-and-element/