JavaScriptGuiones de JavaScript *
JavaScriptGuiones e información sobre JavaScript
GuionesÍndice de guiones ("scripts") de JavaScript Los últimosÚltimos guiones ("scripts") incorporados o modificados Los más vistosGuiones ("scripts") más visitados
ArtículosArtículos y apuntes sobre JavaScript Prensa digitalJavaScript en la prensa digital
InternetJuan Rodríguez [Consultor]
Consultoría en Internet ContactarPor si quieres escribirnos...
*
Mapa WebMapa Web (Directorio) de nuestros contenidos sobre JavaScript << Menú >>
Juan Rodríguez [Consultor] Guiones (scripts) de JavaScript
Estás en: Juan Rodríguez [Consultor] > JavaScript > Índice de guiones > Logo oscilante <

Logo oscilante

Verificado en:

Opera 9.02 y 9.20
Opera 6.05, 7 y 8
Firefox 1.5 y 3.0b5
Mozilla 1.8
Netscape 7
Internet Explorer 6 y 7

Opera web browser

Este guión provoca el oscilamiento de un logotipo, ya sea gráfico o de texto (como en el ejemplo).

En el guión pueden alterarse las variables que determinan el movimiento, mientras que el gráfico o texto a mover, y su color, se establecen en capas (ver código a incluir en el cuerpo de la página), que es lo que realmente se mueve.
Ejemplo de aplicación de este guión

Instalación Ver código Descargar + guiones

Código en las cabeceras (head) de la página

<script type="text/javascript">
<!-- inicio
var x=0; var cnt=0; var numletras=10; var fondocolor="#B5BBB4";
var fondoancho=180; var fondoalto=100; var lambda=.6; var frecuencia=0.05;
var toppos=46; var posder=20; var amplitud=10;
var sephor=16; //espacio horizontal entre letras

function LogoOscilante( ) {
if (parseInt(navigator.appVersion.charAt(0)) >3) {x=x+3; if (x > (2000*3.2)) {x=3.2;}
for(n=0; n < numletras;n++) {n1="letra"+(n+3);

if (document.layers) {
document.layers['caja'].document.layers[n1].top=toppos+Math.sin(lambda*n+frecuencia*x)*amplitud;
document.layers['caja'].document.layers[n1].left=posder+sephor*n; }

if(document.all) {
document.all[n1].style.top=toppos+Math.sin(lambda*n+frecuencia*x)*amplitud;
document.all[n1].style.left=posder+sephor*n; }

if(!document.all && document.getElementById){
document.getElementById(n1).style.top=toppos+Math.sin(lambda*n+frecuencia*x)*amplitud +"px";
document.getElementById(n1).style.left=posder+sephor*n+"px"; } }

window.setTimeout("LogoOscilante( )",10); } }
// final -->
</script>

Código en el cuerpo (body) de la página

<body onload="LogoOscilante();">

<div id="caja" style="position:absolute; width:40px; top:200px; left:550px; height:100px; z-index:5">
<div id="letra3" style="position:absolute; font-size:14pt; color:red">J</div>
<div id="letra4" style="position:absolute; font-size:14pt; color:blue">a</div>
<div id="letra5" style="position:absolute; font-size:14pt; color:red">v</div>
<div id="letra6" style="position:absolute; font-size:14pt; color:green">a</div>
<div id="letra7" style="position:absolute; font-size:14pt; color:blue>S</div>
<div id="letra8" style="position:absolute; font-size:14pt; color:red>c</div>
<div id="letra9" style="position:absolute; font-size:14pt; color:blue>r</div>
<div id="letra10" style="position:absolute; font-size:14pt; color:green>i</div>
<div id="letra11" style="position:absolute; font-size:14pt; color:blue>p</div>
<div id="letra12" style="position:absolute; font-size:14pt; color:red>t</div>
</div>


javascriptLogo oscilante

Juan Rodríguez [Consultor] Copyright © Juan Rodríguez y Begues Internet s.l.
Todos los derechos reservados
Aviso Legal

J
a
v
a
S
c
r
i
p
t
Juan Rodríguez [Consultor]

Cuidar de nuestro entorno natural,
puede y debe ser cosa de todos.

Por ejemplo, no gastando papel para
imprimir una información que siempre
puedes tener en la pantalla de tu pc.
- -

Guiones y "scripts" de JavaScript

Juan Rodríguez [Consultor]
Barcelona, Begues, Castelldefels