 |
| Estás en: Juan Rodríguez, web personal > 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, 3.0b5 y 3.0.6 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="../rc/cst031B-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>
Copyright ©
Juan Rodríguez, consultor y
Begues Internet, s.l.
Todos los derechos reservados
Aviso Legal
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
Castelldefels (Barcelona)
