Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo 

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes VI

Transiciones III

Continuación del ejercicio

Esta página es continuación del ejercicio iniciado en las páginas anteriores. Hasta ahora hemos hecho una página en la que hay una presentación en la que las imágenes cambian cada 8 segundos. El código javascript lo hemos preparado para poder introducir más tipos de transición, los cuales los controlamos desde un menú.

En el siguiente enlace se muestra la página del ejercicio tal como quedaba en la página anterior:

Transiciones - fase 2


y el código de la página que hemos escrito hasta ahora lo mostramos en el siguiente enlace:

Código de Transiciones - fase 2


A partir de aquí continuamos con la página.


Añadir más tipos de transiciones

Para añadir más tipos de transiciones en la página ampliaremos las estructuras switch, tanto de la función cambio(), como de la función transición es posible que tengamos que hacer algún tipo de ajuste en el resto del código en algún tipo de transición. Todo ello lo veremos más adelante.


Transición de derecha a izquierda

Para realizar la transición de imágenes con desplazamiento de derecha a izquierda, en primer lugar posicionamos la imagen entrante a la derecha de la saliente, pero fuera de la pantalla. Para ello en la estructura switch de la función cambio() añadimos la siguiente condición:

        switch (modo) {
        case "0": //tipo Sin transición
           ....
        break;
        case "1": //tipo De derecha a izquierda
        posEnt=400; //posición inicial pantalla entrante.
        posSal=0; //posicion inicial pantalla saliente.
        miprueba.innerHTML="Transición de derecha a izquierda.";
        break;
        }

En color siena están destacadas las nuevas líneas que hemos escrito. Simplemente indicamos aquí los valores iniciales de la transición. posEnt=400; indica que la imagen entrante se situará 400px a la derecha de la pantalla,como 400px es la anchura de la pantalla, la imagen queda fuera de ésta. La imagen saliente (posSal)Se sitúa ocupando toda la pantalla.

En segundo lugar en la función transicion() añadiremos una nueva condición a la estructura switch, en la que indicaremos que en cada intervalo las pantallas móviles con las imágenes se colocan 10px hacia la izquierda. Cuando la pantalla entrante llega a ocupar toda la pantalla del visor, paramos el temporizador. Veamos el código javascript:

function transicion() { //temporizador de transición
         switch (modo) { 
         case "0"://modo sin transición
         visionar() ; //visualizar elementos comunes
         clearInterval(completado) //parar transición
         break;
         case "1": //modo de derecha a izquierda
         visionar(); //visualizar en pantalla
         posEnt-=10; //px de desplazamiento para entrante
         posSal-=10; //px de desplazamiento para saliente
         divEnt.style.left=posEnt+"px"; //desplazamiento pantalla entrante 
         divSal.style.left=posSal+"px";	//desplazamiento pantalla saliente 
         if (posEnt<=0){ //la pantalla entrante ocupa todo el visor:
             clearInterval(completado) //parar el desplazamiento.   
             }
         break;
         }
         }

En color siena las nuevas líneas que hemos incorporado a la función, las cuales se corresponden con una nueva condición de la estructura switch. El código indica lo que se debe hacer en cada intervalo de la transición:

Después de añadir estas líneas en la página de ejemplo podemos ver el resultado en el siguiente enlace:

Transiciones - fase 3


Transición de izquierda a derecha

Los otros tipos de transición en los que las imágenes se desplazan son muy parecidos a este último. Tal como hemos hecho antes, añadimos una condición en la estructura switch de la función cambio(), que indica la posición inicial de las pantallas entrante y saliente, y después en la función transicion() añadimos la visualización, el desplazamiento, y el paro de la transición cuando la imagen entrante está lista.

Para la transición de izquierda a derecha (modo "2") en la estructura switch de la función cambio() añadiremos la siguiente condición:

         case "2": //tipo De izquierda a derecha
         posEnt=-400; //posición inicial pantalla entrante.
         posSal=0; //posicion inicial pantalla saliente.
         miprueba.innerHTML="Transición de izquierda a derecha.";
         break;

La diferencia con el anterior es que posEnt es ahora negativo, lo cual hace que la imagen entrante se quede en la parte izquierda.

Luego en la función transicion() añadiremos una nueva condición a la estructura switch la cual es muy parecida a la de la condición anterior:

         case "2":  //modo de izquierda a derecha
         visionar(); //visualizar en pantalla
         posEnt+=10; //px de desplazamiento
         posSal+=10; 
         divEnt.style.left=posEnt+"px"; //desplazamiento pantallas
         divSal.style.left=posSal+"px";	
         if (posEnt>=0){ 
             clearInterval(completado) //parar el desplazamiento.   
             }
         break;

La diferencia está en que aquí en vez de dismunuir la posición la aumentamos, de esta manera el desplazamiento es en el sentido contrario. Cambiamos también la condición que para el temporizador; en vez de ser posEnt<=0, es ahora posEnt>=0.


Transición de arriba a abajo

De forma parecida a las dos anteriores insertamos un tipo de transición que mueve las imágenes de arriba a abajo. Aquí hay que tener en cuenta que la altura del visor es de 340px, y que el estilo CSS que cambiamos para producir el movimiento no es left, sino top.

En la estructura switch de la función cambio() añadiremos la siguiente condición:

         case "3": //tipo De arriba a abajo
         posEnt=-340; 
         posSal=0; 
         miprueba.innerHTML="Transición de arriba a abajo.";
         break;

La posición de la pantalla entrante es -340px, lo que la sitúa justo por encima de la pantalla saliente.

En la función transicion() añadiremos también una nueva condición a la estructura switch:

         case "3":  //modo de arriba a abajo
         visionar(); //visualizar en pantalla
         posEnt+=10; //px de desplazamiento
         posSal+=10; 
         divEnt.style.top=posEnt+"px"; //desplazamiento pantallas 
         divSal.style.top=posSal+"px";	
         if (posEnt>=0){ //parar el desplazamiento.
             clearInterval(completado)    
             }
         break;

En cada intervalo la pantalla se va desplazando 10px hacia abajo hasta completar la transición.


Transición de abajo a arriba

Con un código muy parecido al anterior insertamos el tipo de transición que mueve las pantallas de imágenes de arriba a abajo. Aquí la posición inicial de la pantalla entrante está debajo del visor, y el desplazamiento lo realizamos hacia arriba, por lo que será negativo. Como en el código anterior, en la estructura switch de la función cambio() añadimos la condicion:

         case "4": //tipo De abajo a arriba
         posEnt=340; 
         posSal=0; 
         miprueba.innerHTML="Transición de abajo a arriba.";
         break;

Añadimos también una nueva condición a la estructura switch de la función transicion():

         case "4":  //modo de abajo a arriba
         visionar(); //visualizar en pantalla
         posEnt-=10; //px de desplazamiento
         posSal-=10; 
         divEnt.style.top=posEnt+"px"; //desplazamiento pantallas 
         divSal.style.top=posSal+"px";	
         if (posEnt<=0){ //parar el desplazamiento.
             clearInterval(completado)    
             }
         break;

Completamos con esto los tipos de transicion en los que las imágenes se desplazan. La página de ejemplo queda ahora como en el siguiente enlace:

Transiciones - fase 4


Y el código de esta página de ejemplo que hemos escrito hasta ahora podemos verlo en el siguiente enlace:

Código de Transiciones - fase 4





En la siguiente página continuamos ampliando este ejercicio, veremos más tipos de transicion.

Transiciones IV.



Imágenes en prácticas js.

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com