Escrito por: Martín el 12-07-2011 09:00:02 y leído 1112 veces

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

 

Código JAVASCRIPT

(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);
    });

})();

Categorías: Jquery • Calcular Distancia • Javascript •

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.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

estructura organizativa jquery • determinar la posición en un div del puntero en jquery • calculo la distancia y los tamaños de las estrella • cual es la distancia del puntero del mouse • MEDIR LA DISTANCIA DEL MOUSE • como hallar el offset del scroll en javascript • codigo puntero mouse • puntero jquery • desplazamiento de imagenes con el cursor • medidor de distancias con mouse • js posicionar un div en el raton • capturar posicion mouse jquery • div javascript mouse posicion • jquery cambiar centro de coordenadas de div • contador distancia quilometricas • mostrar un div en el cursor de mouse jquery • calcular distancia entre divs javascript • funcion para que el scroll aparece en cierta posicion • jquery cursor raton • como medir una distancia • medidor de distancias en actionscript 2 • jquery comprovar posicion de de un elemento en el scroll • javascript separación entre divs • medir distancias en chrome • posicionar elementos a cierta distancia • como calcular el mouse • medir recorrido mouse • medir un div desde chrome • distancia entre divs jquery • obtener las coordenadas del scroll del mouse con jQuery • medidor de coordenadas mouse • medir imagenes en php jquery • javascript coordendas raton chrome • position jquery raton • medir distancias entre componentes diseño web • calcula el desplazamiento del mouse • posicionar capa en las coordenadas del mouse • jquery evaluar posicion puntero • evaluar posicion del mouse javascript • contador de distancia para un mouse • calcular distancia scroll div • saber distancia entre dos elementos javascript • contador de distancia con un mouse • javascript distancia coordenadas • añadir flecha de raton a android • determinar recorrido a las barras del scrollpane • jquery zoom en puntero del raton • php javascript posicion cursor imagen • las fotos aparecen con movimiento del cursor jquery • jquery position mouse rel element • distancia entre elementos jquery • reposicionar un div javascript • puntero de mouse distancia • medicion con puntero de raton • medir scroll • jquery raton • jquery posicion raton sobre imagen • elemeto distancia • posicionar posicion puntero jquery • nube de imágenes en movimiento lightbox as2 • javascript calcular distancias • jquery limitar movimiento raton • medir distancias dentro de una imagen con js • calcular distancia recorrida raton • jquery plugin maps para calcular distancia • jquery calcular distancia a un div • jquery distancia capa • distancias kilométricas android • detectar distancia entre el mouse jquery • javascript object escapes mouse#hl=es • medir distancias con un raton • scrolltop jquery hasta una determinada posicion • puntero medir • Evento con el Puntero Mouse • como usar el raton para medir distancias • medir de distancia mouse • calcular distancia javascript • medir distancias con el raton • cursor google jquery • js medir distancia entre dos divs • evento de posicion de mouse jquery • chrome medir distancias • medir distancias con el mouse • que evento tiene el cursor del mouse en android • GOOGLE CALCULAR DISTANCIAS RATON • contar distancia del raton • jQuery posicion cursor dentro del elemento • jquery posicionar element cursor • distancia jquery • medir distancia con el cursor • web para contar kilometros • jquery distancia entre dos elementos • calcular el centro de una imagen con jquery • jquery cursor centro div • jquery calcular distancia horizontal • calcular distancias kilometricas con jquery • el puntero del raton • calculador web distancias • javascript posicion determinada mouse • medir distancia con el mouse sin instalacion •