Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end II / Aula

arrow_back Aula 06 - Eventos

Exemplo

Página HTML do exemplo (index.html)

<!DOCTYPE html>
<html lang="pt-br">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brincando com o cursor do mouse!</title>
    <script src="script.js" async></script>
    <style>
      body {
        width: 100vw;
        height: 100vh;
      }
      .circle {
        position: absolute;
        top: 1px;
        width: 100px;
        height: 100px;
        color: transparent;
        border: 5px solid red;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <div class="circle"></div>
  </body>

</html>

Javascript do exemplo (script.js)

const area = document.body;
const circulo = document.querySelector('.circle');

var comprimentoJanela = window.innerWidth;
var alturaJanela = window.innerHeight;

function coordenadasMouse(e) {
    // Capturamos o objeto do evento (movimento do mouse).
    // Obtemos a coordenada X (distância da borda esquerda da janela) a partir da propriedade clientX.
    // Pegamos a largura da janela, subtraímos da coordenada e do raio do círculo.
    // Fazemos o mesmo com a coordenada Y (distância da borda de cima da janela).
    var posicaoHorizontal = comprimentoJanela - e.clientX - 50;
    var posicaoVertical= alturaJanela - e.clientY - 50;

    // Definimos a posição horizontal e vertical do círculo.
    circulo.style.left = posicaoHorizontal + 'px';
    circulo.style.top = posicaoVertical + 'px';
}

function mudarCorQuandoTocar() {
    circulo.style.backgroundColor = "green";
    circulo.style.borderColor = "green";
}

// Quando o cursor do mouse se move, executa a função coordenadasMouse.
area.addEventListener('mousemove', coordenadasMouse);

// Quando o cursor do mouse toca o círculo, executa a função mudaCorQuandoTocar.
circulo.addEventListener('mouseenter', mudarCorQuandoTocar);

// Quando o cursor do mouse deixa o círculo, remove o atributo style anteriormente atribuído ao círculo.
circulo.addEventListener('mouseleave', function() { circulo.removeAttribute("style"); });

Versão 5.3 - Todos os Direitos reservados