TECNato – TIC's Perú

Calcular la Distancia que hay de un punto a otro punto con jQuery.

viernes, 19 de octubre del 2012 Comentar

En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web pequeña o para otras aplicaciones que deseamos y que tiene un montón de interacción con el usuario y desea ejecutar un evento cuando el ratón del usuario se encuentra en una distancia determinada de un elemento.

Solo creamos las variables globales, el evento y la función para el documento.

Código Javascript :


Como se puede ver en el código hemos establecido una función en el evento .mousemovede manera cada vez que la persona mueve el ratón se procedera con lo siguiente.

Luego se utiliza la variable e para obtener la posición X e Y del mouse y envía esto a la función calculateDistance con un parámetro de elemento.

Ahora creamos nuestros contenedores divs para recibir los datos:

<div id=”distancia”>La distancia hasta el punto es: <span> </span> pixeles.</div>
<br />
<div id=”texto”>
<h4>Partiendo del punto de partida que es el 0 de color naranja</h4>
<p>Un ejemplo seria calcular la distancia desde el punto que es el 0 de color naranja hasta una caja azul con circulo blanco: </p>
</div>
<div id=”elemento”>0</div>

Eso es casi todo, aca dejo una demo en donde estan todo el codigo completo (le das botón derecho del mouse en la pagina de la demo y luego le das ver codigo fuente) :

DEMO

Eso es todo, espero te haya gustado y que te sea muy útil.


Escrito por para TECNato

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear un espacio virtual de usuarios Peruanos para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación)

Hazte miembro

TECNato es libre y abierto a nuevos miembros Peruanos, que estén dispuestos a compartir sus conocimientos en TIC’s, escribenos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
Gestor de contenidos:
WordPress