Hola hoy ablaremos de la etiqueta marquee la cual tienen algunos atributos pero solo veremos algunos, si se preguntan para que sirve esta etiqueta bueno les dire, esta etiqueta sirve para poner un texto en movimiento como marquesina.
ahora pasemos a la practica para poner un texto en movimiento como marquesina solo ponemos lo siguiete en el bloc de notas y aguardamos con la extencion HTML
<html>
<head><title>marquesina</title>
</head>
<body>
<marquee bgcolor="black" style="color:white;">hola soy una marqusina</marquee>
</body>
</html>
como vemos el movimiento es de derecha a izquierda pero si queremos que se muevan al reves de izquierda a derecha pondremos el atributo direction="right" esto ahora que se mueva de izquierda a derecha nos quedaria el codigo asi
<html>
<head><title>marquesina</title>
</head>
<body>
<marquee bgcolor="black" direction="right" style="color:white;">hola soy una marqusina</marquee>
</body>
</html>
bueno ahora si queremos que se mueva para abajo y si mire de forma vertical, el codigo nos quedaria asi
<html>
<head><title>marquesina</title>
</head>
<body>
<marquee bgcolor="black" width="12" direction="down" style="color:white;">
h
o
l
a
s
o
y
u
n
a
m
a
r
q
u
s
i
n
a
</marquee>
</body>
</html>
como ven el texto ahora ira de arriba asia abajo se tiene un efecto como matrix, solo nos faltaria que el texto cambie cada segundo nos quedaria asi
<html>
<head><title>marquesina</title>
</head>
<body bgcolor="black">
<marquee bgcolor="black" id="10" width="12" direction="down" style="color:white;"></marquee>
<script>
ciclo();
function ciclo()
{
var txt,digi,largo;
largo=30;
txt="\n"
for(var x=0;x<=largo;x++)
{
digi=Math.floor(Math.random() * (122 - 97) + 97);
txt= txt + String.fromCharCode(digi) + "\n";
}
document.getElementById("10").innerHTML=txt;
setTimeout("ciclo()",100);
}
</script>
</body>
</html>
bueno se pone interesante ahora si ponemos mas marquesinas unas 80 y agregamos un poco de codigo para que el texto de las marquesina cambie el codigo quedaria asi
<html>
<head><title>marquesina</title>
</head>
<body bgcolor="black">
<marquee bgcolor="black" id="0" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="1" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="2" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="3" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="4" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="5" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="6" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="7" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="8" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="9" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="10" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="11" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="12" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="13" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="14" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="15" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="16" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="17" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="18" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="19" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="20" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="21" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="22" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="23" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="24" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="25" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="26" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="27" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="28" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="29" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="30" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="31" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="32" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="33" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="34" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="35" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="36" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="37" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="38" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="39" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="40" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="41" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="42" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="43" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="44" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="45" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="46" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="47" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="48" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="49" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="50" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="51" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="52" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="53" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="54" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="55" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="56" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="57" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="58" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="59" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="60" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="61" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="62" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="63" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="64" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="65" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="66" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="67" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="68" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="69" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="70" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="71" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="72" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="73" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="74" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="75" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="76" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="77" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="78" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="79" width="12" direction="down" style="color:white;"></marquee>
<marquee bgcolor="black" id="80" width="12" direction="down" style="color:white;"></marquee>
<script>
var largo=new Array(80);
var txt=new Array(80);
for(var a=0;a<=80;a++)
{
largo[a]=Math.floor(Math.random() * (40 - 10) + 10);
}
ciclo();
function ciclo()
{
var x,digi;
for(x=0;x<=80;x++)
{
txt[x]="\n";
}
for(x=0;x<=80;x++)
{
for(y=0;y<largo[x];y++)
{
digi=Math.floor(Math.random() * (122 - 97) + 97);
txt[x]= txt[x] + String.fromCharCode(digi) + "\n";
}
}
for(x=0;x<=80;x++)
{
document.getElementById(x).innerHTML=txt[x];
}
setTimeout("ciclo()",50);
}
</script>
</body>
</html>
bueno espero les halla gustado saludos Flamer y si quieren probar los codigos solo copeen y pegen en el bloc de notas y aguardelon como matrix.html y aprobar saludos
No hay comentarios.:
Publicar un comentario