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 > De paseo por la pantalla <

De paseo por la pantalla

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

El texto efectúa diversos movimientos por la pantalla y retorna a su posición de origen.

Lo que se desplaza puede ser un párrafo (como en el ejemplo), un menú, un gráfico, etc. incluido en una capa (<div>) con posición inicial absoluta.

El guión puede activarse automáticamente al descargarse la página y/o en un enlace. En el ejemplo hay dos puntos de activación y en esta página hay tres (1), todos ellos con diferentes velocidades de movimiento.

(1): Al descargarse la página y con los botones "De Paseo" y "Ejecutar".

Puede editarse el guión para crear otros recorridos. Vigilar que cada desplazamiento tenga su inverso, para asegurar que el "paseante" vuelva a su origen. Tener en cuenta que esos desplazamientos sean compatibles con monitores de 1024x768 y 800x600.

Este texto se desplazará:
- En diagonal hacia arriba
- horizontalmente a la izquierda,
- verticalmente hacia abajo y
- verticalmente hacia arriba.

Ejecutar Instalación Ver código Descargar + guiones

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

<script type="text/javascript">
<!-- inicio
function SalirPaseo(vel) {
salto=vel;
recorrer=100;
Diagonal() }

function Diagonal(){
hor= document.getElementById("paseante").style.left;
ver= document.getElementById("paseante").style.top;
poshor= parseInt(hor);
posver= parseInt(ver);

if (recorrer > 0) {poshor+=(3*salto); posver-=salto; recorrer-=salto;
document.getElementById("paseante").style.left=poshor + "px";
document.getElementById("paseante").style.top=posver + "px";
setTimeout("Diagonal()",10); }
else Horizontal() }

function Horizontal() {
hor = document.getElementById("paseante").style.left;
poshor = parseInt(hor);

if (recorrer < 300) {poshor-=salto; recorrer+=salto;
document.getElementById("paseante").style.left=poshor + "px";
setTimeout("Horizontal()",10); }
else {recorrer=200; Bajar() } }

function Bajar() {
ver = document.getElementById("paseante").style.top;
posver = parseInt(ver);

if (recorrer > 0) {posver+=salto; recorrer-=salto;
document.getElementById("paseante").style.top=posver + "px";
setTimeout("Bajar()",10); }
else {recorrer=100; salto=1; Subir()} }

function Subir() {
ver = document.getElementById("paseante").style.top;
posver = parseInt(ver);

if (recorrer > 0) {posver-=salto; recorrer-=salto;
document.getElementById("paseante").style.top=posver + "px";
setTimeout("Subir()",10); }
else {salto=2; recorrer=100; return} }
// final -->
</script>

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

<!-- Activación con la descarga de la página -->
<body onload="SalirPaseo(2)">

<!-- Activación pulsando un botón -->
<form action="">
<p style="text-align:center">
<input type="button" value="De paseo" onclick="SalirPaseo(4);" name="button">
</p>
</form>

<!-- El paseante. Lo que se mueve. -->
<div id="paseante" style="position:absolute; left:460px; top:240px; width:200px; visibility:visible;z-index:5; background-color:transparent">
<p>Este texto se desplazará:
<br>- En diagonal hacia arriba
<br>- horizontalmente a la izquierda,
<br>- verticalmente hacia abajo y
<br>- verticalmente hacia arriba.
</p>
</div>


javascriptDe paseo por la pantalla

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

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