Un ejemplo de uso seria
(este es solo un ejemplo de muestra, sin el modo automatico es mas sencillo)
Código Javascript
:
Ver originalvar sl = new Slider('elementID', 'accionadorID', 'otroAccionadorID',
{
transition : 'bounce:out',
duration : 2000,
toggler : 'mouseover',
mode : 'horizontal',
auto: true,
delay: 2000,
stopElement: 'stop',
stopEvent: 'click'
});
Donde
elementID seria el identificador del elemento que se desea mover
accionadorID seria el identificador del elemento que hace "esconder" al elemento mencionado arriba
otroAccionadorID seria el identificador del elemento que vuelve a "mostrar" el elemento mencionado escondido
Los parametros del objeto
options son
duration : duracion del efecto (de la transicion)
transition : tipo de transicion (ver
esta pagina)
toggler : evento accionador del efecto (corresponde al elemento pasado, obviamente)
mode : modo, puede ser horizontal o vertical
auto : modo automatico (default: false)
delay : intervalo de tiempo (en ms) para el modo automatico.
stopElement : identificador del elemento que hara que se detenga el modo automatico
stopEvent : evento que hara que se detenga el efecto (asociado con stopElement, obviamente)
Un ejemplo del uso (automatico)
Código HTML:
<html>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var sl = new Slider('content', null, null, {
transition : 'bounce:out',
duration : 2000,
toggler : 'mouseover',
mode : 'horizontal',
auto: true,
delay: 2000,
stopElement: 'stop',
stopEvent: 'click'
});
});
</script>
<style type="text/css">
#slider_container{
position: relative;
width: 350px;
height: 150px;
background: orange;
border: 1px solid #000000;
}
#content{
width: 180px;
height: 80px;
background-color: #000000;
margin: 25px 0 0 75px;
color: #ffffff;
text-align: justify;
padding: 10px;
}
</style>
</head>
<body>
<div id="slider_container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<a href="#" id="stop">Detener</a>
</body>
</html> Un ejemplo sin el modo automatico
Código HTML:
<html>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var sl = new Slider('content', 'col_izq', 'col_der', {
transition : 'bounce:out',
duration : 2000,
toggler : 'mouseover',
mode : 'horizontal',
});
});
</script>
<style type="text/css">
#slider_container{
position: relative;
width: 350px;
height: 150px;
background: orange;
border: 1px solid #000000;
}
#content{
width: 180px;
height: 80px;
background-color: #000000;
margin: 25px 0 0 75px;
color: #ffffff;
text-align: justify;
padding: 10px;
}
#col_izq, #col_der{
position: absolute;
width: 50px;
height: 37px;
top: 0;
left: 0;
background-color: #ffffff;
border: 1px solid #000000;
font-size: 13px;
padding: 13px 0 0 0;
text-align: center;
}
#col_der{ left: 298px; }
</style>
</head>
<body>
<div id="slider_container">
<div id="col_izq">Ocultar</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
<div id="col_der">Mostrar</div>
</div>
</body>
</html> Espero que sirva!
NOTA: en breve le agregare el metodo para volver el efecto al pararlo =)