Ir para conteúdo
thi100

Melhorar Código Javascript

Por , em Javascript

Recommended Posts

thi100    0

thi100
Postado

Boa tarde pessoal , estou desenvolvendo uma aplicação que tem um história com personagens e balões de fala, que depois de um tempo some e aparece somente quando passa o mouse no personagem, achei que o código ficou muito extenso e repetitivo, isso sem contar que vai ter seção que terão mais de 4 personagens, por isso gostaria que vocês me ajudassem a diminuir esse código. 

<!doctype html>
<html lang="en">
<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        .balloon{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .people{
            width: 100px;
            height: 200px;
            background-color: black;
            margin-left: -40px;
            margin-top: 10px;
            cursor: pointer;
        }
        .show{
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="container" id="section-one">
        <div class="row characters text=center">
            <div class="col-3">
                <div class="character1">
                    <div class="balloon"></div>
                    <div class="people people1"></div>
                </div>
            </div>
            <div class="col-3">
                <div class="character2">
                    <div class="balloon"></div>
                    <div class="people people2"></div>
                </div>
            </div>
            <div class="col-3">
                <div class="character3">
                    <div class="balloon"></div>
                    <div class="people people3"></div>
                </div>
            </div>
            <div class="col-3">
                <div class="character4">
                    <div class="balloon"></div>
                    <div class="people people4"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        function removerBalloon(idSection, class1, class2, class3, class4,time1,time2,time3,time4){
            setTimeout(function() {
                $(idSection + class1).css('visibility','hidden');
                console.log('1 '+ idSection + class1+ time1);
            }, time1);
            setTimeout(function() {
                $(idSection + class2).css('visibility','hidden');
                console.log('2 '+ idSection + class2+ time2);
            }, time2);
            setTimeout(function() {
                $(idSection + class3).css('visibility','hidden');
                console.log('3 '+ idSection + class3+ time3);
            }, time3);
            setTimeout(function() {
                $(idSection + class4).css('visibility','hidden');
                console.log('4 '+ idSection + class4+ time4);
                show();
            }, time4);

	        function show(){
                var characters = [idSection+' .people1',idSection+' .people2',idSection+' .people3', idSection+' .people4'];
                $(characters[0]).mouseover(function(){
                    $(idSection + class1).css('visibility','visible');
                });
                $(characters[0]).mouseout(function(){
                    $(idSection + class1).css('visibility','hidden');
                });
                $(characters[1]).mouseover(function(){
                    $(idSection + class2).css('visibility','visible');
                });
                $(characters[1]).mouseout(function(){
                    $(idSection + class2).css('visibility','hidden');
                });
                $(characters[2]).mouseover(function(){
                    $(idSection + class3).css('visibility','visible');
                });
                $(characters[2]).mouseout(function(){
                    $(idSection + class3).css('visibility','hidden');
                });
                $(characters[3]).mouseover(function(){
                    $(idSection + class4).css('visibility','visible');
                });
                $(characters[3]).mouseout(function(){
                    $(idSection + class4).css('visibility','hidden');
                });
	        }
        }

        removerBalloon('#section-one', ' .character1 .balloon', ' .character2 .balloon', ' .character3 .balloon', ' .character4 .balloon',2000,4000,6000,8000);

    </script>

  </body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito