|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Ticker I
por Luciano Moreno, del departamento de diseño web de BJS Software.
Todos nosotros hemos visto en multitud de páginas el típico efecto de marquesina que se desplaza por la pantalla del navegador, y a veces hemos deseado implementar una de ellas en nuestras páginas.
En el caso de diseñar sólo para Internet Explorer el trabajo es fácil, ya que éste navegador posée una etiqueta propietaria para conseguir el efecto, MARQUEE. Pero ésta etiqueta no funciona en las diferentes versiones de Nestcape Navigator.
Vamos a ver cómo se construye una marquesina, más comunmente llamada ticker, compatible con todos los navegadores. Para construirla vamos a usar una capa simple con un texto en su interior, capa que vamos a mover por la pantalla mediante un ciclo periódico.
El código necesario para la página es el siguiente:
<html>
<head>
<title>Capa
que se mueve - Ticker</title>
<style
type="text/css">
#capa1{position:relative;left:-100px;
width:150px;visibility:visible;}
</style>
<script languaje="JavaScript"
type=
"text/javascript">
var
posicion=100;
function mueveCapa(id)
{
if (posicion <
(screen.width+100))
posicion+=5;
else
posicion=-100;
if(document.all)
{
document.all[id].style.left=posicion;
}
else
if(document.layers)
document.layers[id].left=posicion;
else
if(document.getElementById)
document.getElementById(id).style.left=posicion+"px";
var
temporal="setTimeout('mueveCapa(\""+id+"\")',20)";
eval(temporal)
}
</script>
</head>
<body bgcolor="#ffff99" onLoad="mueveCapa('capa1')">
<div
id="capa1">
<P><font face="Verdana,
Helvetica">Esto se mueve...</font></p>
</div>
</body>
</html>
Consideraciones:
1) Aplicamos diferente sintaxis de código para cada navegador, ya que cada uno de ellos maneja las capas de forma diferente. Para más información, ver diferentes artículos de DHTML en este mismo portal.
2) setTimeout("funcion()", tiempo) es un método de JavaScript que llama a una función en un tiempo en milisegundos determinado.
3) Por lo demás el código es de lo más simple que podemos encontrar. Definimos una capa posicionada absolutamente y accedemos a su propiedad left, aumentándola 5 pixels cada 20 milisegundos mediante el método setTimeout. Para poder pasarle a éste método el identidicador de la capa usamos el método eval. Tan sólo explicar ya que establecemos una variable posicion para comprobar en cada ciclo que la capa no se ha ido a la derecha de la pantalla más de la mitad de lo que ésta tiene de ancho más 100 pixels, para conseguir que a cualquier resolución la capa vuelva a empezar el ciclo por la izquierda una vez que se deja de ver por la derecha.
4) Nota cómo hemos usado la secuencia de escape \" en el método eval para que tome las comillas como un elemento diferente al de cierra de la cadena de texto incluida en el método.
Por lo demás creo que queda claro el código.
El resultado de este código podéis verlo pinchando aquí.
Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Textos