Etiqueta desplazándose por el explorador

 
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 tres funciones y además necesita de una variable global (dvmostrar).

La función principal es mover, y es la que debe de ser llamada. Recibe 6 variables:
amover(string o objeto) La etiqueta HTML a mover (objeto), o bien su id (string)
dvpaso(int) Es el movimiento de la etiqueta en píxeles, si se pone 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 se pone una cadena de caracteres (recordar entre comillas), los valores pueden ser:
centrado: En cuyo caso la etiqueta se desplazaría al centro.
Si se pone cualquier otra cadena, se desplazara hasta el final.
Si lo que se quiere es que se desplace hasta el principio de la página se deberá poner el valor 0 en número
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


Esta función inicializará los valores necesarios tanto en las variables pasadas como en la etiqueta HTML y llamará a movimiento, que realizará el movimiento de la etiqueta autollamándose, hasta que la etiqueta llegue al final.

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 llamándola dentro de la etiqueta).

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:
<body onload="movimiento(10, 1, 'centrado', 'fin',0)">

-Un div que será el que después se desplazará por la pantalla. Este div tiene los siguientes atributos:
stylepara darle los siguientes estilos:
postion:absolute; Esto dice que la posición del div será dada por nosotros, así se podrá mover, la función mover ya lo establece, por lo que no es necesario.
left:1000px;top:-200px;width:150px;height:100px; 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 idSon los atributos usados para identificar al elemento, 'name' no es necesario aunque recomendable. 'id' si es necesario para poder pasarlo a la función 'mover'

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 desplazará, ya estaría en el sitio. En estos casos deberíais poner al principio de la función mover al lado de amover.style.position = "absolute";, justo antes o después algo como:

amover.style.left = "200px";
amover.style.top = "200px";
Cambiando "200px" por la posición desde donde se desee comience la etiqueta.


En el HEAD:
<script type="text/javascript">
//Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
//Copyright © McAnam.com
    var dvmostrar;
    
    function mover (amover, dvpaso, dvespera, dvhorizontal, dvvertical, dvfin){
        
        if (typeof amover == "string")
            amover = document.getElementById(amover);
        
        amover.style.display = "block";
        amover.style.position = "absolute";
        
        if (typeof dvhorizontal == "string"){
            if (dvhorizontal == "centrado"){
                dvhorizontal = (document.body.clientWidth - parseInt(amover.offsetWidth)) / 2;
            }else{
                dvhorizontal = document.body.clientWidth - parseInt(amover.offsetWidth);
            }
        }
        if (typeof dvvertical == "string"){
            if (dvvertical == "centrado"){
                dvvertical = (document.body.clientHeight - parseInt(amover.offsetHeight)) / 2;
            }else{
                dvvertical = document.body.clientHeight - parseInt(amover.offsetHeight);
            }
        }
        
        movimiento(amover, dvpaso, dvespera, dvhorizontal, dvvertical, dvfin);
        
    }
    
    function movimiento(amover, dvpaso, dvespera, dvhorizontal, dvvertical, dvfin){
                
        var horizontal = parseInt(amover.style.left, 10);
        if (isNaN(horizontal)) horizontal = 0;
        var vertical = parseInt(amover.style.top, 10);
        if (isNaN(vertical)) vertical = 0;
                
        if (horizontal != dvhorizontal){
            if ((horizontal < dvhorizontal) && (horizontal + dvpaso >= dvhorizontal)){
                horizontal = dvhorizontal;
            }else if(horizontal < dvhorizontal){
                horizontal += dvpaso;
            }else if(horizontal > dvhorizontal){
                horizontal -= dvpaso;
            }
        }
        if (vertical != dvvertical){
            if ((vertical < dvvertical) && (vertical + dvpaso >= dvvertical)){
                vertical = dvvertical;
            }else if(vertical < dvvertical){
                vertical += dvpaso;
            }else if(vertical > dvvertical){
                vertical -= dvpaso;
            }
        }
                
        amover.style.left = horizontal + 'px';
        amover.style.top = vertical + 'px';
                
        if ((horizontal != dvhorizontal) || (vertical != dvvertical)){
            dvmostrar = setTimeout(function(){movimiento(amover, dvpaso, dvespera, dvhorizontal, dvvertical, dvfin);}, dvespera);
        }else{
            if (parseInt(dvfin) > 0){
                dvmostrar = setTimeout(function(){fin_movimiento(amover)},dvfin * dvpaso);
            }else if (parseInt(dvfin) == 0){
                fin_movimiento();
            }else{
                clearTimeout(dvmostrar);
            }
        }
    }
    function fin_movimiento(amover){
        
        if (typeof amover == "string")
            amover = document.getElementById(amover);
        
        amover.style.display = "none";
        clearTimeout(dvmostrar);
    }

//-->    
</script>

En el BODY:
<input type="button" onclick="mover('dvmovimiento', 1, 1, 'centrado', 'centrado', 1000)" value="Mover" style="margin-bottom:500px" />
<div style="position:absolute;left:1000px;top:-200px;width:150px;height:100px;display:none;z-index:32;" name="dvmovimiento" id="dvmovimiento">
        <div align="right"><a href="javascript:fin_movimiento('dvmovimiento')">[X]</a></div><br />
        Aquí lo que se mueve<br>
        puedes meter <span style="color:red">código</span><br />
</div>

Links relacionados:
Mantener PopUp siempre en primer plano
Manejo de los estilos en JavaScript
Saber posición (coordenadas) del ratón
Reproducir música con flash (indefinidamente)


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com