Pasa letras con movimiento circular hecho con JavaScript
<html>
<head>
<style>
body{background-color:#2a2ae3;}
</style>
<SCRIPT>
var abc = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","Ñ","O","P","Q","R","S","T","U","V","W","X","Y","Z");
abc.reverse();
var ancho=20;
var altura=20;
var a=0.05;
var radio=1;
var x,y;
function zoom()
{
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
radio +=2;
if(radio<=200)
setTimeout("zoom();",10);
}
function zoomenos()
{
if(radio>=1){
radio-=10;
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
}
}
function iniciar()
{
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.body.innerHTML +='<div id="'+ abc[i]+'" style="position:absolute; width:'+ancho+'px; height:'+altura+'px; top:'+y+'px; left:'+x+'px;">'+ abc[i]+'</div>';
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
}
function girar()
{
ancho+=10;
altura+=10;
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
setTimeout("girar();",10);
}
</SCRIPT>
</head>
<BODY onLoad="iniciar()">
<form id="form1" action="#" method="POST">
<input type="button" onclick="girar();" value="Girar"/>
<input type="button" onclick="zoom();" value="Darle zoom"/>
<input type="button" onclick="zoomenos();" value="Quitar zoom"/>
</form>
</BODY>
</html>
<head>
<style>
body{background-color:#2a2ae3;}
</style>
<SCRIPT>
var abc = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","Ñ","O","P","Q","R","S","T","U","V","W","X","Y","Z");
abc.reverse();
var ancho=20;
var altura=20;
var a=0.05;
var radio=1;
var x,y;
function zoom()
{
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
radio +=2;
if(radio<=200)
setTimeout("zoom();",10);
}
function zoomenos()
{
if(radio>=1){
radio-=10;
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
}
}
function iniciar()
{
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.body.innerHTML +='<div id="'+ abc[i]+'" style="position:absolute; width:'+ancho+'px; height:'+altura+'px; top:'+y+'px; left:'+x+'px;">'+ abc[i]+'</div>';
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
}
function girar()
{
ancho+=10;
altura+=10;
for(var i = 0;i < abc.length;i++){
a+=0.232;
x=275+Math.cos(a)*radio;
y=523+Math.sin(a)*radio;
document.getElementById( abc[i]).style.top= x;
document.getElementById(abc[i]).style.left= y;
}
setTimeout("girar();",10);
}
</SCRIPT>
</head>
<BODY onLoad="iniciar()">
<form id="form1" action="#" method="POST">
<input type="button" onclick="girar();" value="Girar"/>
<input type="button" onclick="zoom();" value="Darle zoom"/>
<input type="button" onclick="zoomenos();" value="Quitar zoom"/>
</form>
</BODY>
</html>
Comentarios