Qui

04

Dez

2008

22:14

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:

Elementos div na área body da página
<div style="position: relative; height: 360px; width: 400px;">
   <div id="mosca" style="position: absolute; height: 50px; width: 50px;"><img src="images/fly08.gif" /></div>
   <img src="images/nose.gif">
</div>

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.

O script da mosca
<script type="text/javascript">
$(document).ready(
   function() {
      $("#mosca").mouseover(
         function() {
            var x = Math.floor(Math.random()*400);
            var y = Math.floor(Math.random()*360);
            $(this).css('top', y+'px');
            $(this).css('left', x+'px');
         }
      );
   }
);
</script>

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.

Script da mosca mais 'puro'
<script type="text/javascript">
$(document).ready(
   function() {
      $("#mosca").mouseover(
         function() {
            var x = Math.floor(Math.random()*400);
            var y = Math.floor(Math.random()*360);
            $(this).animate({top: y+'px', left: x+'px'}, "slow");
         }
      );
   }
);
</script>

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ó