![Juan Rodríguez [Consultor]](../rc/rc262-jrc.png)
 |
| Estás en: Juan Rodríguez [Consultor] > JavaScript > Índice de guiones > Texto en movimiento horizontal < |
Verificado en: Opera 9.02, 9.27 y 9.50Opera 6.05, 7 y 8 Firefox 1.5 y 3.0b5 Mozilla 1.8 Netscape 7 Internet Explorer 6 y 7
|
Para ver el efecto de este guión de JavaScript pulsa en activar este guión. El cuadro que se desplaza es internamente una división ("div") en la que puede insertarse lo que se desee. Texto, gráfico, enlaces,... Observar, más abajo en el <body>, la configuración de la etiqueta <div>. Puede adaptarse su posición, diseño y contenido a vuestras necesidades (el fondo podría ser transparente). |
En el ejemplo, el movimiento se detiene antes de desbordar la pantalla por la derecha, cualquiera que sea el ancho del monitor, con lo que el guión siempre se comportará según la pantalla del visitante de vuestra página. Una vez que este ejemplo se haya detenido a la derecha, vuelve a pulsar para que haga otro viaje. Para su activación automática al descargar una página, añadir la función mover() en la etiqueta body (<body onload="mover()">). |
Ejecutar Instalación Ver código Descargar + guiones
Código en las cabeceras (head) de la página
<script type="text/javascript">
<!-- inicio
var poshor=-300; var Id=0;
function mover() {
if (self.innerHeight) {ancho= self.innerWidth}
else if (document.documentElement && document.documentElement.clientHeight) {ancho=document.documentElement.clientWidth}
else if (document.body) {ancho=document.body.clientWidth};
if (!Id) {poshor=-300; MoverLogotipo()} }
function MoverLogotipo() {poshor++;
if (document.layers) {document.Logotipo.left=poshor}
if (document.all) {document.all.Logotipo.style.left=poshor}
if (!document.all && document.getElementById) {document.getElementById("Logotipo").style.left=poshor+"px"}
if (poshor >=(ancho - 290) ) {window.clearTimeout(Id); Id=0} else {Id = window.setTimeout("MoverLogotipo();",10) } }
// final -->
</script>
Código en el cuerpo (body) de la página
<div id="Logotipo" style="position:absolute; left:-350px; top:425px; width:250px; z-index:5; text-align:center; border:1px white solid; background-color:#576969; color:white">
<p><a style="color:white" href="http://www.castefa.net" title="Directorio de Castelldefels (Barcelona)">
<img src="../corporate/cst028-logo_castefa_izq.png" style="width:126px; height:94px; float:left" alt="Directorio de Castelldefels" />
<br />www.castefa.net<br /><br />Directorio de<br />Castelldefels</a></p>
</div>
<a href="javascript:void(0)" onclick="mover();">Pulsar aquí</a>
![Juan Rodríguez [Consultor]](../corporate/jrc010-jrc_mv.png)
Copyright ©
Juan Rodríguez y
Begues Internet s.l.
Todos los derechos reservados
Aviso Legal
![Juan Rodríguez [Consultor]](../rc/rc220-jrc_v.png)
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.
- -
Juan Rodríguez [Consultor]
Barcelona, Begues, Castelldefels
