Rolagem de página animado com JQuery

Posted by alex | Posted in .NET, Geral, HTML, JSP, JavaScript, POO | Posted on 11-11-2009-05-2008

0

E aí galera blz!
Sou o Alexander, mais conhecido Alex. Trabalho na Agence como webdesigner e faço freelancers através de minha empresa Lexadesign.

Neste meu primeiro post no blog dos Relaxos vou mostrar como fazer rolagem de página animada utilizando jQuery:

Começando com o HTML, montamos uma estrutura contendo título, links e imagem. A rolagem animada entre estes itens será feita por Jquery.

Criamos uma DIV #container para alinhar o conteúdo ao centro, em seguida as DIVs #um, #dois, #tres e #quatro. Cada um contendo H1, lista com links e uma imagem.

HTML:

<div id="container">
    <div id="um">
        <h1>Conteudo 01</h1>
        <ul>
            <li><a href="#dois">ir para conteúdo 02</a></li>
            <li><a href="#tres">ir para conteúdo 03</a></li>
            <li><a href="#quatro">ir para conteúdo 04</a></li>
        </ul>
        <img src="moto-mv-agusta-f4-senna-c8726.jpg" alt="" />
    </div>
    <div id="dois">
        <h1>Conteudo 02</h1>
        <ul>
            <li><a href="#tres">ir para conteúdo 03</a></li>
            <li><a href="#quatro">ir para conteúdo 04</a></li>
            <li><a href="#um">ir para conteúdo 01</a></li>
        </ul>
        <img src="9673moto.jpg" alt="" />
    </div>
    <div id="tres">
        <h1>Conteudo 03</h1>
        <ul>
            <li><a href="#quatro">ir para conteúdo 04</a></li>
            <li><a href="#um">ir para conteúdo 01</a></li>
            <li><a href="#dois">ir para conteúdo 02</a></li>
        </ul>
        <img src="11209moto2.jpg" alt="" />
    </div>
    <div id="quatro">
        <h1>Conteudo 04</h1>
        <ul>
            <li><a href="#um">ir para conteúdo 01</a></li>
            <li><a href="#dois">ir para conteúdo 02</a></li>
            <li><a href="#tres">ir para conteúdo 03</a></li>
        </ul>
        <img src="4268moto1-1.jpg" alt="" />
    </div>
</div>

CSS:

html, body {
margin:0;
font:12px Arial, Helvetica, sans-serif;
}
#container {
width:95%;
margin:0 auto;
}
h1 {
display:block;
width:60%;
position:relative;
float:left;
}
#um, #dois, #tres, #quatro{
padding:10px;
width:95%;
text-align:center;
}
ul {
width:40%;
margin:0;
padding:20px 0 10px;
position:relative;
list-style:none;
float:left;
}
ul li {
position:relative;
float:left;
}
ul li a {
display:block;
padding:4px 8px;
color:#063;
text-decoration:none;
}

Temos a estrutura básica com todos os links apontados para os seus devidos lugares. Porém ao clicar a página é deslocada de forma brusca e nada atrativa.

Eis o momento em que damos vida a nossa página adicionando a biblioteca JQuery disponível no site http://jquery.com/

$(function(){
 
//Rolagem de página
//Definindo a ação - No caso indico que ao clicar em qualquer <strong>tag A</strong> desencadeia a seguinte ação
$("a").click(function(){
//animar, a partir do html/body, a rolagem
$('html,body').animate({scrollTop:
 
//até a posição obtida pela altura do <strong>elemento alvo</strong> a ser especificado
$("elemento alvo").offset().top}
 
//velocidade da animação em milisegundos
, 500);
 
//atribui para este caso, que retornasse na como <strong>elemento alvo</strong> o <strong>href</strong> do objeto clicado
$(this).attr("href")
 
A função completa ficou assim:
$(function(){
 
//Rolagem de página
$("a").click(function(){
$('html,body').animate({scrollTop: $($(this).attr("href")).offset().top}, 500);
})
})
})
})
Read More

IFrame com height de 100% – Resize

Posted by Vinicius Quaiato | Posted in HTML, JavaScript | Posted on 10-03-2009-05-2008

0

Dica de HTML

Para criar um Iframe com altura de 100% da página podemos utilziar o seguinte Javascript:

No conteúdo HTML coloque o seguinte:

Original: 3kTecnologia

Abraços

Read More