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++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 20
Visitas el mes pasado: 12
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Cuando un elemento es mayor que la ventana en la que se visualiza normalmente, para poder verlo entero, aparecen unas barras de desplazamiento al lado derecho y en la parte inferior. Esto es lo que se conoce como Scroll. La clase Fx.Scroll permite mover el elemento sin usar las barras de desplazamiento, sino llevándolo al punto en el que le indiquemos, y además con un efecto de transición.
Para que funcione esta clase debemos cargar los archivos "core" y more" de mootools.
lo primero que debemos hacer para utilizar esta clase es instanciar un objeto, el cual se referirá a un elemento de la página:
efecto=new Fx.Scroll($("elemento"),{[opciones]});
Como primer argumento pasamos el elemento sobre el cual queremos aplicar el efecto. Como segundo argumento pasamos una serie de opciones, las cuales son las mismas que para cualquier objeto Fx, y además podemos poner la siguiente opción:
Una vez instanciado el objeto, lo que nos permitirá moverlo son los métodos que le apliquemos. Tenemos los siguientes métodos:
.set(x,y)
Desplaza el elemento a las coordenadas indicadas, x e y serán dos números que indican las coordenadas. El desplazamiento se produce de forma inmediata y sin efecto de transición.
efecto.set(100,100);
.start(x,y)
Al igual que el anterior también desplaza el elemento a las coordenadas indicadas. La diferencia está en que aquí si que se produce efecto de transición.
efecto.start(100,100);
.toTop()
Desplaza el elemento para poder ver la parte superior del mismo.
efecto.toTop()
.toBottom()
Desplaza el elemento para poder ver la parte inferior del mismo.
efecto.toBottom()
.toLeft()
Desplaza el elemento para poder ver la parte izquierda del mismo.
efecto.toLeft()
.toRight()
Desplaza el elemento para poder ver la parte derecha del mismo.
efecto.toLeft()
.toElement($("subelemento"))
Aquí dentro del elemento deberá haber uno o más subelementos. El método desplaza al elemento hasta poder ver el subelemento indicado en el argumento.
efecto.toElement($("apartado1"))
Veamos un ejemplo en el que ponemos una foto con un texto debajo, dentro de una caja que es más pequeña, lo que obliga a hacer scroll. Sin embargo el desplazamiento lo haremos a traves de unos botones en lugar de las barras de desplazamiento.
Ponemos en primer lugar el código HTML, en el cual incluimos dentro de un elemento una imagen y un texto. También ponemos los botones para poder manejar el desplazamiento del elemento.
<div id="caja1"> <img src="../objetos/koala.jpg" alt="koala"> <p id="texto">Los koalas viven en el este de Australia, donde hay más eucaliptos. A los koalas les gustan tanto estos árboles que casi nunca los abandonan. Además, gracias a sus extremidades y dedos oponibles se mantienen cómodamente sobre ellos. </p> </div> <p><button id="boton1">Arriba</button> ... <button id="boton2">Abajo</button> ... <button id="boton3">Izquierda</button> ... <button id="boton4">Derecha</button> ... <button id="boton5">x=100,y=100</button> ... <button id="boton6">Texto</button> </p>
Los botones se corresponden con los métodos vistos anteriormente, de forma que cada botón nos dará una posición diferente.
Ahora ponemos el código CSS. Con esto hacemos que la ventana que contiene la imagen y su texto sea más pequeña que lo que ocupan estos:
#caja1 { width: 30%; height: 200px; float: right; margin: 1em 3em 1em 1em; background-color:#ceedff; overflow: hidden; padding: 0; } #caja1 img { width: 400px; } #caja1 p { font: normal 12px verdana; width: 360px; margin: 0px; padding: 5px 20px; }
Hemos puesto al contenedor un overflow: hidden que hace que sólo podamos ver una parte del contenido, y además no tenga barras de desplazamiento.
Los koalas viven en el este de Australia, donde hay más eucaliptos. A los koalas les gustan tanto estos árboles que casi nunca los abandonan. Además, gracias a sus extremidades y dedos oponibles se mantienen cómodamente sobre ellos.
... ... ... ... ...
Ahora vemos aquí a la derecha el resultado del ejemplo que estamos poniendo, ya en funcionamiento, con los botones que tenemos aquí arriba; sin embargo nos falta por hacer todavía el código javascript-mootools que es el que da el dinamismo.
En primer lugar, (siempre dentro del "domready"), instanciamos el objeto. Aquí le damos también una posición inicial mediante el método .set.
efecto=new Fx.Scroll($("caja1"),{ duration: 800, transition:"quad:in:out" }); efecto.set(100,100);
Después asociamos a cada botón un método mediante el evento "click":
$("boton1").addEvent("click",function(){ efecto.toTop(); }); $("boton2").addEvent("click",function(){ efecto.toBottom(); }); $("boton3").addEvent("click",function(){ efecto.toLeft(); }); $("boton4").addEvent("click",function(){ efecto.toRight(); }); $("boton5").addEvent("click",function(){ efecto.start(100,100); }); $("boton6").addEvent("click",function(){ efecto.toElement($("texto")); });
Con esto ya tenemos completado el ejemplo, que funcionará tal como vemos aquí arriba.
En la siguiente página vemos el efecto "slide" que muestra um oculta un elemento haciendo un efecto de deslizamiento.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com