Fácil: imagem rollovers

31 de janeiro de 2009 0 Por atercombr

Recentemente themeforest.net correu um rápido tutorial sobre como conseguir uma imagem slide efeito semelhante à nossa homepage. Eu pensei que eu iria entrar em mais alguns detalhes sobre a concepção decisões fizemos.

Aqui está o exato jQuery código utilizado:

$(‘#body_home #our_work li’).hover(function(){ $(this).find(‘img’).animate({top:’139px’},{queue:false,duration:500}); }, function(){ $(this).find(‘img’).animate({top:’0px’},{queue:false,duration:500}); });

Há realmente muito que não! Em primeiro lugar, selecione todas as

  • elementos dentro de nosso “our_work ‘bloco na página inicial. Cada uma destas é uma imagem e um bloco de texto envolto em um link. Ao usar um id para definir o bloco deixamos jQuery encontrá-lo muito rapidamente: o localizador mantém uma lista de todos os elementos com um atributo id que jQuery pode ligar diretamente em.

    Depois temos os nossos blocos podemos aplicar Hover funcionalidade a elas. O primeiro método consiste em passar para a pairar manipulador é o nosso deslizem animação eo segundo é o nosso slide para cima. Nós encontramos o elemento dentro de cada bloco, e animá-lo longe do topo. No nosso caso, temos escolhido meio segundo (500ms) para concluir um deslize para baixo e para cima, e ao passar na fila: false nós ter certeza de que o slide para cima cancela o slide para baixo se o usuário ratos fora do bloco, enquanto ele é animating. Eu escolhi para animar a imagem para baixo por 139px porque isso é a altura exata da imagem: apenas o suficiente para levá-la ao largo ecrã.

    De um ponto de vista CSS ainda é mantido bastante simples:

    #our_work li{ float:left; margin:0 30px 95px 0; padding: 5px 7px 8px 5px; width:258px; } #our_work li a { display: block; position: relative; overflow: hidden; height: 107px; width: 226px; padding: 16px; } #our_work li a:focus, #our_work li a:hover { text-decoration: none; } #our_work li img { position: absolute; top: 0; left: 0; height: 139px; width: 258px; }

    O

  • s são ventilados esquerda para torná-los line up e dada uma certa margem e padding, e um conjunto largura. Dentro de cada
  • temos um elemento que embrulha ao redor do e associados texto. Damos este display: block e um fixo de altura e largura para que actos tão completa clicáveis área. Porque o está dentro deste, também é clicável. Ao fazer o posição relativa que age como uma mãe para o posicionamento quando definir o a posição absoluta it’ll referência suas coordenadas a partir do canto superior esquerdo do Por último, o overflow: hidden esconde a quando ele desliza fora da Simples!

    Retoques finais que adicionamos são o estilo de texto com uma bela fonte eo tamanho e adicione um pouco de fundo esquina dobrada-imagem, mas este é, obviamente, facilmente personalizáveis para qualquer estilo que você deseja.

    Uma coisa que é muito importante tomar cuidado de, sempre que você está escrevendo o Javascript está a enfrentar quando JS não está disponível. Para os nossos blocos optamos por mostrar apenas as imagens. Porque eles ainda estão dentro do link que pode ser clicado, por isso o usuário pode ir até a página de info desse projecto. Screenreader usuários devem também ser lido o texto de descrição para trás a imagem como não estamos escondendo-a.

    Larguem-me um comentário se estiver interessado em saber mais sobre outros efeitos jQuery fizemos neste site e outros de nossa carteira e eu vou escrever um pouco mais sobre ele.