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.

Manual de MooTools (II Efectos)

MooTools: la librería más completa para trabajar fácilmente 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





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 24

Visitas el mes pasado: 54

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

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




MooTools2 (VIII)

La clase Fx.Move

imagen mootools

Introducción

La clase Fx.Move permite mover un elemento, tomando como referencia bien sea la página entera (document) u otro elemento. Normalmente el elemento de referencia contiene al que se mueve. El elemento que se mueve se moverá dentro del elemento de referencia, o por lo menos, se moverá tomando como coordenadas al elemento de referencia. El cambio de ubicación del elemento se realiza mediante una transición.


Sintaxis

Basta con instanciar el objeto. Como primer argumento se pasa el elemento que queremos mover, y como segundo una serie de opciones:

mueve=new Fx.Move($("elemento"),{[opciones]})

Como primer argumento pasamos el elemento que queremos mover. Como segundo una serie de opciones que explicamos a continuación:

Las opciones que podemos poner en el segundo argumento son todas las de la clase Fx.Morph y además las siguientes:

Una vez instanciado el objeto debemos iniciar el efecto con el método start.

mueve.start()

El método start podemos ponerlo tal cual sin argumentos, o también podemos pasarle como argumento las opciones específicas de Fx.Move. En este caso no es necesario pasarlas al instanciar el objeto.

De todas maneras las opciones generales de Fx deben pasarse siempre al instanciar el objeto, y las específicas podemos pasarlas al instanciarlo o también al llamar al método start.


Ejemplo con Fx.Move

Vemos aquí a la derecha el efecto que queremos conseguir. Al pulsar sobre un cuadrado transparente, el cuadrado azul se desplaza hacia él.

Esto lo conseguimos aplicando el efecto Fx.Move() tanto para posicionar los cuadrados inicialmente, como para mover el cuadrado azul al pulsar sobre cualquiera de los otros.

Empezamos por ver el código HTML. Los distintos códigos los pondremos comentados para indicar qué es lo que estamos haciendo en cada momento:

<!--  elemento contenedor donde se produce el desplazamiento -->
<div id="caja1">
  <!-- elemento que se mueve -->
  <div id="mover"></div>
  <!-- cuadrados de referencia. La función "mueve" con el evento "onclick"
     se encargará de llevar el elemento al sitio indicado -->
  <div id="UL" class="ref" onclick="mueve('upperLeft')"></div>
  <div id="UC" class="ref" onclick="mueve('upperCenter')"></div>
  <div id="UR" class="ref" onclick="mueve('upperRight')"></div>
  <div id="CL" class="ref" onclick="mueve('centerLeft')"></div>
  <div id="CC" class="ref" onclick="mueve('center')"></div>
  <div id="CR" class="ref" onclick="mueve('centerRight')"></div>
  <div id="BL" class="ref" onclick="mueve('bottomLeft')"></div>
  <div id="BC" class="ref" onclick="mueve('bottomCenter')"></div>
  <div id="BR" class="ref" onclick="mueve('bottomRight')"></div>
</div>

El código CSS es importante, ya que da forma y tamaño a los elementos y los hace visibles. Este es el CSS aplicado:

/*posicionamos y damos forma y tamaño al elemento contenedor */
#caja1 { width: 45%; height: 300px; border: 4px double red; 
         margin: 1em 3em 1em 1em; float: right; }
/* tamaño de los cuadrados */
#mover, .ref { width: 40px; height: 40px; margin: 5px;  }
/* elemento que se mueve de color azul */
#mover { background-color: blue; }
/* cuadrados de referencia: */
.ref { border: 1px dashed grey; cursor: pointer; }

El código javascript-mootools es el que realmente posiciona los elementos en su sitio y luego produce el efecto. Este es el siguiente:

window.addEvent("domready",function() {
//Arrays para los cuadrados de referencia y sus opciones:
cuadrados=Array("UL","UC","UR","CL","CC","CR","BL","BC","BR");
opciones=Array("upperLeft","upperCenter","upperRight","centerLeft","center",
               "centerRight","bottomLeft","bottomCenter","bottomRight");
//posicionar los cuadrados de referencia. los llevamos a su sitio mediante Fx.Move
for (i=0; i<cuadrados.length;i++) {
   new Fx.Move($(cuadrados[i]),{
      relativeTo:$("caja1"),
      position: opciones[i],
      edge: opciones[i]
      }).start();
   }
//Instanciamos Fx.Move para el cuadrado azul.
azul=new Fx.Move($("mover"),{
   relativeTo: $("caja1"),
   duration: 1500,
   transition: "quad:in:out",
   fps: 25
   }); 
//colocamos el cuadrado azul en el centro (posición por defecto)
azul.start();
}); //cerramos la estructura "domready"

//funcion para mover el cuadrado azul al pulsar sobre los de referencia.
function mueve(posicion){
   azul.start({
      position: posicion,
      edge: posicion
      });
   }

En el código utilizamos el objeto Fx.Move tanto para posicionar los elementos al inicio, como para luego poder hacer el efecto al pulsar sobre los cuadrados.


Aplicación directa sobre elementos

Podemos aplicar el objeto Fx.Move directamente sobre un elemento (sin tener que instanciar el objeto) mediante el siguiente código:

$("elemento").move({[opciones]});

Dentro de las opciones podemos poner las opciones específicas de Fx.Move. El elemento se moverá según le indiquemos. Sin embargo no podemos poner las opciones generales de Fx, ya que éstas no surtirán ningún efecto.






En la siguiente página vemos el efecto "reveal" que permite abrir un elemento con un efecto de aparición progresiva.

La clase Fx.Reveal()



Manual de Mootools (II Efectos)

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