MooSlide - painel deslizante

Com este artigo pretendo exemplificar como se cria um slide parecido com aquele que se encontra no topo deste site... Altamente personalizavel, através de CSS e do código no Script, esta pode ser a solução para muitos websites. 

Mãos à obra!

Passo 1: Scripts!

Inserir antes do </head> do seu site a chamada ao mootools e ao script MooSlide(o qual terá que colocar no seu servidor)

Passo 2: Código de Chamada

 Colar o código de implementação (chamada) no seu site

javascript
<script language="javascript" type="text/ecmascript">var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500,  toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut, from:'top' });
</script>

'toggle' vai ser o futuro 'id' do link de chamada, enquanto que 'test' é o id do <div> que contem o conteúdo a aparecer no slide.

No código acima pode ainda definir:

• A velocidade do slide;
• A velocidade do "fade out";
• Remover no click sim/nao;
• A opacidade;
• A altura do slide;
• Orientação do slide: 'top' ou 'bottom'.

Passo 3: Link de chamada

html
<a href="#" id="toggle">Toggle slider 1</a>

Passo 4: Criar Slide

Criar o Slide e o seu conteúdo

html
<div id="test" class="mooslide">
#O conteudo que deseja....
</div>

Passo 5: Css

css
 .mooSlide {
    background-color:#000;
    
    padding: 10px;
 
    font-family: Arial, Helvetica, sans-serif;
 
    line-height: 16px;
 
    color: #FFFFFF;
 
    font-size: 11px;
 
}

Download dos ficheiros referidos no artigo:

mooSlide.zip

[(scripts, css, html)]

24 Kb

TrackBack URI for this entry

Lucas Outubro 03, 2008	caramba com este mootools da pra coisa pra caramba.. Ficou muito legal este mooslide!! vlw amigo..
jeton Outubro 16, 2008	perfect thanks for sharing...
Paula Julho 12, 2009 http://www.aaac.wordpress.com	Olá, nao consigo colocar o slide, ajuda? Obrigada