1

O marquee foi descontinuado e a alternativa é implementar um css para realizar o mesmo efeito de rolagem de texto, o que é válido.

Porém surgiu uma necessidade de obter o momento em que a rolagem do texto chega ao fim, evento que era presente no marquee por meio do onfinish, é possível obter o evento usando css e jQuery?

2
  • 1
    Pergunta duplicada: pt.stackoverflow.com/questions/11862/… Commented 12/12/2016 às 14:05
  • 3
    @WallaceMaxters essa não é duplicata, aqui o AP quer um evento dentro do marquee, é o que titulo não foi intuitivo, mas ele quer algo como onfinish
    – Syzoth
    Commented 12/12/2016 às 14:08

2 Respostas 2

2

Uma lib jQuery simples é https://github.com/aamirafridi/jQuery.Marquee

Basta chamar $("seu seletor(es)").marquee(); dentro de $(function() {...}) ou $.ready(function() {...}) e aplicar overflow: hidden;:

Pra pausar use pauseOnHover, pra pegar o evento use o bind("finished", function() {...}) no elemento

$(function() {
     $('.box1, .box2').marquee();

     $('.box3').bind("finished", function() {
          console.log("Terminou!");
     }).marquee({
         "duration": 1000,
         "pauseOnHover": true
     });
});
.box1, .box2, .box3 {
   width: 200px;
   height: 64px;
   overflow: hidden;
}

.box1 {
   background: #fc0;
}

.box2 {
   background: #f0f0f0;
}

.box3 {
   background: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js" type="text/javascript"></script>

<h2>Simples</h2>
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>

<h2>Pra duplicar o conteudo e dar o efeito continue</h2>
<!-- duration é o tempo que leva para terminar, quanto maior mais devagar, gab é o espaço entre as duplicatas e `duplicated` é para causar o efeito que está andando em circulos -->
<div class="box2" data-duration="5000" data-gap="10" data-duplicated="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
</div>

<h2>Evento finished</h2>
<div class="box3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
</div>

API do jQuery.marquee

É possível configurar diretamente no método, assim:

$('seu seletor').marquee({
    //Velocidade em milesegundos
    duration: 15000,

    //Espaço em pixels entre as o elementos
    gap: 50,

    //Tempo em milesegundos antes de iniciar
    delayBeforeStart: 0,

    //direção 'left', 'right', 'up', 'down'
    direction: 'left',

    //Se true faz o elemento ser duplicado para causar o efeito de continuidade
    duplicated: true
});

Postagens relacionadas

0

Para aqueles que por ventura tenham a mesma necessidade, encontrei uma alternativa para o marquee, usando o Jquery ScrollBox

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .