Etiqueta desplazándose por el explorador en JavaScript

Este artículo trata sobre como hacer una de esas etiquetas que se desplazan a lo largo de la pantalla generalmente con contenido publicitario en su interior.
Este código consta de dos funciones y además necesita de una variable global (dvmostrar).

La función principal es movimiento, y es la que debe de ser pasada. Recibe 5 variables:

dvpaso	(int) Es el movimiento de la etiqueta en píxeles, si pones uno se moverá un píxel, 2 dos píxeles, etc
dvespera	(int) Es el tiempo de espera para cada 'dvpaso', esta representado en milisegundos, así para que espere un segundo se debería de poner 1000
dvhorizontal y dvvertical	(int o string) Hacia donde se dirigirá la etiqueta, posición en píxeles, si pones una cadena de caracteres (recordar entre comillas), los valores pueden ser: centrado: En cuyo caso la etiqueta se desplazaría al centro. Si pones cualquier otra cadena, se desplazara hasta el final. Si lo que quieres es que se desplace hasta el principio de la página deberás poner el valor 0 en numero
dvfin	(int) Si recibe un valor mayor de 0 esperara un tiempo y después desaparecerá, el tiempo que tardará en desaparecer será la multiplicación de dvpaso por dvfin (en milisegundos). Si recibe 0 desaparecerá en cuanto termine el desplazamiento. Si recibe cualquier otro valor o no se le ha pasado, no lo hará desaparecer

La función fin_movimiento puede ser llamada por la función movimiento y se encarga de liberar la variable dvmostrar y
hacer desaparecer la etiqueta.
Si le damos un valor negativo a dvfin esta función nunca será llamada y nunca desaparecerá por lo que sería recomendable llamarla de alguna forma (quizás poniendo un link con un href).

El BODY consta de dos partes:
-Un botón para llamar a la función, esta también se podría llamar en la misma etiqueta del body, por ejemplo:

-Un div que será el que después se desplazará por la pantalla. Este div tiene las siguientes etiquetas:

style

Muy importante tiene los siguientes atributos:
postion:absolute; Esto dice que la posición del div será dada por nosotros, asi lo podremos mover, (No quitar ni modificar).
left:1000;top:-200;width:150;height:100; La posición del div (izquierda y arriba) y las dimensiones de este (ancho y alto), el left y el top le dirán desde donde empieza a moverse (No se deben de quitar pero puedes modificar sus atributos para que el div comience desde un punto que tu desees o mida mas o menos)
display:none; Esto hace que la etiqueta no sea visible desde el principio, cuando la función comienza la hace visible, (Se puede quitar)
z-index:32; La posición z (la profundidad) del objeto, si otro objeto tuviera esta propiedad mas alta, se superpondría a la etiqueta, si no la tuviera o la tuviera mas baja aparecería por debajo, (Se puede modificar)

name e id

Son los atributos usados para identificar al elemento, 'name' no es necesario aunque recomendable. 'id' si es necesario, si quisieras cambiarle el id deberías cambiar las llamadas a él en el código

Nota: Recordar que esta función mueve el div hasta donde le decimos, por lo que si la llamamos por segunda vez, el div ya estará en la posición por lo que no se desplazara, ya estaría en el sitio. En estos casos deberiaís poner al principio de la función movimiento al lado de document.getElementById("dvmovimiento").style.display = "block";, justo antes o después algo como:

document.getElementById("dvmovimiento").style.left = 200;
document.getElementById("dvmovimiento").style.top = 200;

Cambiando 200 por la posición desde donde quieres que empiece.

Usuarios que han visto este tema también han visto...

- Cuenta los caracteres escritos en un textarea con Javascript
- Comprimir y ofuscar archivos .js de JavaScript
- Contadores de Fecha
- Calendario en JavaScript
- Página atrás y página adelante con javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento