Título: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: JonaLamper en 4 Agosto 2016, 20:49 pm ¡Muy buenas!
Tengo que realizar un ejercicio muy simple: al hacer click en la pantalla deberá salir un círculo (que durará sólo 0,5 segundos). El círculo saldrá en las coordenadas donde se haya hecho click y el puntero deberá aparecer en el centro del círculo. El problema es que no sé cómo hacer para que aparezca en el centro, porque a mí me aparece arriba a la izquierda (toma como referencia la esquina superior izquierda de lo que es el círculo). Dejo aquí una captura y el código (es muy simple): Código para ejecutar: https://jsfiddle.net/tDQWN/9589/ (http://thumbs.subefotos.com/f5814436b84b1c5a671ec15d5404339fo.jpg) (http://subefotos.com/ver/?f5814436b84b1c5a671ec15d5404339fo.png) ¿Alguien podría ayudarme? Muchas gracias ;D Título: Re: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: ivancea96 en 4 Agosto 2016, 21:01 pm Si la posición del ratón es (X, Y), y el radio del círculo es R, entonces deberás colocarlo en la posición (X-R, Y-r).
Y por cierto, en ese código, al callback ponle function(event). Sinó, no deberías poder usar la variable "event". Título: Re: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: JonaLamper en 4 Agosto 2016, 21:16 pm Vaya, pues me funciona. ¿Y eso por qué pasa (lo del event)? En forma general digo
Título: Re: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: ivancea96 en 4 Agosto 2016, 21:19 pm "event" no existe. Tienes que ponérselo de nombre al parámetro que recibe el callback.
Título: Re: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: JonaLamper en 4 Agosto 2016, 22:50 pm Perfecto, gracias.
Una última cosa; además de eso, también me dicen que debe tener el radio que pongamos en el input. El problema es que se cambia bien el "width" y el "height", pero el "border-radius" no se cambia :-\ https://jsfiddle.net/tDQWN/9592/ Si le ponemos 60 (por ejemplo), cambia el tamaño pero el border-radius se queda igual. Título: Re: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: + 1 Oculto(s) en 5 Agosto 2016, 01:47 am lo que pase, que no deberia cambiar lo mismo, deberia ser en relacion al tamaño
post modificado: Citar $("#d").css("border-radius",valor/2); Título: Re: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: JonaLamper en 5 Agosto 2016, 12:32 pm Uf, muchas gracias. Ayer mi mente estaba muy espesa :rolleyes:
Título: Re: Centrar círculo al hacer click (CSS + HTML + JS) Publicado por: + 1 Oculto(s) en 5 Agosto 2016, 16:25 pm para resolver este y problemas mucho mas dificiles te recomiendo que leas sobre geometria computacional
saludos que te vaya bien |