Calcular la distancia entre el puntero del ratón y un elemento con jQuery
Escrito por Martín Iglesias y leído 2,345 veces. Ver comentarios
12JULIO/2011
- Categorías:
- Jquery
- Calcular Distancia
- Javascript
Este pequeño trozo de código en jQuery sirve para calcular la distancia entre el cursor del ratón y el centro de un elemento que debemos definir dentro de nuestro código.
Puede ser muy útil para activar cierta función cuando el ratón está en determinada posición o a cierta distancia de algún elemento de nuestra web.
El código está extraído de CSS TRICKS y pertenece a Chris Coyer
(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);
});
})();Acerca del Autor:
Diseñador web freelance en Coruña Galicia | Martin Iglesias
Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.
Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!
Artículos relacionados:
- 20 plugins para jQuery que no pueden faltar en tus webs
- Excelente listado de 240 plugins para jquery
- Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
- jQuery Validate: la rápida validación de formularios.
- Calendario en PHP con eventos, jQuery y vTip
- Formularios web con jQuery Validate y envío por phpmailer y gmail
- 18 plugins jquery que no pueden faltar en tu web parte 2
Este artículo ha salido en un total de 27 búsquedas desde Google en sus 707 días de vida y ha sido visto 2,345 veces.
