Mootools es una libreria ajax que nos permite realizar una gran variedad de efectos especiales sobre componentes html como div, span, a, etc.
En esta ocasion vamos a ver la utilidad de la funcion Fx.Tween y para ello vamos a ver dos pequeños ejemplos. El primero consite en aplicar transparencia en capas a una div, el segundo consiste en cambiar el color de fondo de una div al dar click sobre un enlace.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Cambiar Fondo DIV</title>
<script src="libreria/mootools-1.js" type="text/javascript"></script>
<script>
function CambiarColorDiv(){
efecto = new Fx.Tween("micapa1");
efecto.start("background-color", "#ffffff");
efecto.start("color", "#ffffff");
efectoColorTexto = new Fx.Tween("micapa2", {
property: 'background-color',
duration: 'long',
fps: 200
});
efectoColorTexto.start("#ff8800");
};
</script>
</head><body>
<div id="micapa1" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>
<div id="micapa2" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>
<a onClick="CambiarColorDiv();">Click Aca para Cambiar el Fondo de la Div</a>
</body></html>
No hay comentarios:
Publicar un comentario