Mover capa o imagen en circulo

Miaz · #1 (**permalink**) 21/11/2009, 08:19

¡Hola! Necesito mover una imagen haciendo un circulo de X pixeles de radio... estoy pensando en algoritmos pero no soy capaz de hacerlo... quería saber si existe algua función que haga algo parecido o tenéis idea de algun código o seudocódigo que me pueda ayudar...

Gracias!

Panino5001 · #2 (**permalink**) 21/11/2009, 08:56

Probá así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script>
onload=function(){
	var	o=document.getElementById('p'),
	r=100,
	i=0,
	x,
	y,
	posirx=300,
	posiry=200;
	setInterval(function(){
		i+=.01;
		x=posirx+Math.cos(i)*r;
		y=posiry+Math.sin(i)*r;
		o.style.left=x+'px';
		o.style.top=y+'px';
	},30);
}
</script>
</head>

<body>
<div id="p" style=" background:red; position:relative; height:10px; width:10px;"></div>
</body>
</html>

Como ves, sólo se trata de ajustar las coordenadas x e y del objeto al coseno y al seno (respectivamente) de un ángulo que se autoincrementa (o autodecrementa para que corra en sentido contrario). Los otros ajustes corresponden a la posición inicial del centro y al radio (var r), que define el tamaño del círculo.
Un par de buenos artículos:
http://imbuzu.wordpress.com/2009/10/...igonometria-i/
http://imbuzu.wordpress.com/2009/11/...gonometria-ii/

Miaz · #3 (**permalink**) 21/11/2009, 09:41

Muchísimas gracias!!!

La verdad es que en trigonometría estoy pez total, mas de una vez me ha salido algún proyecto con alguna parte de trigonometría y he tenido que pedir ayuda.

Gracias por tus enlaces, creo que es un buen momento para echarle un buen vistazo y dejar de "estar pez"

Un abrazo.