Detalhes

Categoria: Javascript

Atualização: Segunda, 08 Fevereiro 2010 22:15

Autor: vovó Vicki

Acessos: 7812

No tutorial anterior, que mostra um dos efeitos que pode ser obtido com hide e show, comentei que "não havia nem a necessidade de criar um CSS". Enquanto escrevia aquele tutorial, me passou uma idéia pela cabeça: dá para fazer uma brincadeira alterando propriedades CSS de um elemento. Foi daí que surgiu "A mosca".

A brincadeira

Sabe aquela mosca bem chata, que fica rodeando a gente em dia que ameaça chuva e que, mesmo meio "molona", não conseguimos pegar nem com reza brava? É ela mesma a tal que está aqui. Espante a mosca com o mouse.

Como funciona

O documento precisa de dois elementos div, um dentro do outro. O externo precisa ter uma posição relativa (position: relative) e contém a imagem do nariz e o div interno. Este, por sua vez, precisa ter uma posição absoluta (position: absolute) e contém a imagem da mosca. Este tipo de posição é necessário para que o div interno não saia dos limites do div externo. Se você quiser uma explicação detalhada deste comportamento dê uma lida em CSS - Posição Relativa e Absoluta.

O código HTML é o seguinte:

O elemento que deve se movimentar é o div interno, o que contém a mosca. Para que possamos acessá-lo é preciso identificá-lo, daí id="mosca". Podemos atrelar a este objeto um evento click ou mouseover para que reaja ao cursor do mouse. Escolhi o mouseover.

A função para o mouseover calcula inicialmente duas variáveis. Seus valores são dois números randômicos que variam de 0 a 400 (para a largura do div externo) e de 0 a 360 (para a altura do div externo). As funções Math.floor e Math.random são da Javascript, não da biblioteca jQuery. Isto significa que podemos misturar funções da biblioteca com Javascript puro sem problemas.

A variável x é então usada para definir o novo distanciamento do topo do div da mosca e a variável x é usada para definir o novo distanciamento da borda esquerda. Assim que os novos valores são definidos com a função $(this).css(), o div da mosca muda de lugar.

Existe um meio mais "puro" de obter o mesmo efeito usando apenas a jQuery. É a função animate que permite, entre outras coisas, definir as alterações no CSS numa tacada só e indicar a velocidade da transição.

Observe que os seletores CSS ficam num array delimitado por chaves { ... }.

Espero que tenham gostado deste pequeno exemplo que mostrou como usar mais um dos efeitos de animação oferecidos pela biblioteca jQuery. A todos um grande abraço e xôôôô mosca!

vó