elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Centrar círculo al hacer click (CSS + HTML + JS)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Centrar círculo al hacer click (CSS + HTML + JS)  (Leído 2,528 veces)
JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Centrar círculo al hacer click (CSS + HTML + JS)
« 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/





¿Alguien podría ayudarme? Muchas gracias  ;D


En línea

Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Centrar círculo al hacer click (CSS + HTML + JS)
« Respuesta #1 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".


En línea

JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Centrar círculo al hacer click (CSS + HTML + JS)
« Respuesta #2 en: 4 Agosto 2016, 21:16 pm »

Vaya, pues me funciona. ¿Y eso por qué pasa (lo del event)? En forma general digo
En línea

Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Centrar círculo al hacer click (CSS + HTML + JS)
« Respuesta #3 en: 4 Agosto 2016, 21:19 pm »

"event" no existe. Tienes que ponérselo de nombre al parámetro que recibe el callback.
En línea

JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Centrar círculo al hacer click (CSS + HTML + JS)
« Respuesta #4 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.
« Última modificación: 4 Agosto 2016, 22:54 pm por JonaLamper » En línea

Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
+ 1 Oculto(s)

Desconectado Desconectado

Mensajes: 298


un defecto se puede convertir en una virtud


Ver Perfil WWW
Re: Centrar círculo al hacer click (CSS + HTML + JS)
« Respuesta #5 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);
« Última modificación: 5 Agosto 2016, 01:50 am por rn3w » En línea

JonaLamper


Desconectado Desconectado

Mensajes: 394



Ver Perfil
Re: Centrar círculo al hacer click (CSS + HTML + JS)
« Respuesta #6 en: 5 Agosto 2016, 12:32 pm »

Uf, muchas gracias. Ayer mi mente estaba muy espesa  :rolleyes:
En línea

Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.
+ 1 Oculto(s)

Desconectado Desconectado

Mensajes: 298


un defecto se puede convertir en una virtud


Ver Perfil WWW
Re: Centrar círculo al hacer click (CSS + HTML + JS)
« Respuesta #7 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
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Manual Como hacer para mover el mouse y hacer click en vb
Programación Visual Basic
gmf_321 1 11,387 Último mensaje 24 Septiembre 2006, 17:41 pm
por Dahmer
Click Automatico html
Hacking
samuel85 0 2,386 Último mensaje 15 Febrero 2012, 12:35 pm
por samuel85
Click Automatico html
Desarrollo Web
samuel85 3 11,747 Último mensaje 16 Febrero 2012, 23:08 pm
por #!drvy
Duda para centrar contenido de una celda HTML
Desarrollo Web
James_JPM 1 2,184 Último mensaje 14 Noviembre 2016, 04:16 am
por hackmastter
Click en elementos HTML con Scrapy (WebScrapping)
.NET (C#, VB.NET, ASP)
XimeZabato 1 2,370 Último mensaje 12 Enero 2018, 15:33 pm
por Eleкtro
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines