Come fare un ciclo di selezione una volta con un clic?

Question

Quello che sto cercando di ottenere è che una selezione venga riprodotta una volta quando faccio clic sul pulsante. Il mio problema è che se imposto il ciclo su 1, viene riprodotto solo una volta e quindi non fa nulla. Il mio altro problema è che si ferma a metà strada con il mio codice corrente se lascio andare il tasto sinistro del mouse. O si ferma dov'era. C'è un modo per far sì che venga riprodotto una volta quando si preme il pulsante e poi riprodotto nuovamente ogni volta che si preme di nuovo il pulsante e gli consente di completare completamente il ciclo. Ecco il codice, sono aperto all'utilizzo di script java invece di html. Qui è il mio codice corrente:

<marquee behavior="scroll" direction="up" scrollamount="30" id="marquee" height="40"> 
 
    <p>+1</p> 
 
</marquee> 
 

 
<input type="button" id="gather" class="build" Value="play" onmousedown="document.getElementById('marquee').start()." onmouseup="document.getElementById('marquee').stop()" onload="document.getElementById('marquee').stop()">

Answer 1

È possibile utilizzare i CSS e JQuery keyframes (o Javascript) al fine di realizzare questo.

Nell'esempio seguente, sto utilizzando le regole CSS per ottenere l'effetto di animazione e applicandolo aggiungendo/rimuovendo l'elemento span dal DOM utilizzando JQuery.

Codice esempio:

var marquee = '<span class="anim">+1</span>'; 
 

 
$('.btn').click(function(){ 
 
    $('.anim').remove(); //remove the node if its there 
 
    $('.marquee').append(marquee); //append the node 
 
});

.marquee{ 
 
    width: 20px; 
 
    height: 20px; 
 
    overflow:hidden; 
 
} 
 

 
.marquee > span { 
 
    position:relative; 
 
    top:-100%; 
 
    left:0; 
 
    
 
} 
 

 
.anim{ 
 
    animation-name: example; 
 
    animation-duration: 2s; 
 
} 
 

 

 
@keyframes example { 
 
    0%,100% { 
 
    opacity:0; 
 
    top:100%; 
 
    } 
 
    50% { 
 
    opacity:1; 
 
    top:0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="marquee"></div> 
 
<button class="btn">Click here!</button>

Answer 2

siete disposti a usare CSS puro?

Sembra che tu voglia un contatore "+1" al clic. Puoi farlo usando le transizioni CSS. Userò un'ancora piuttosto che un input, perché hai un maggiore controllo sullo stile.

Probabilmente vorrete aggiungere un po 'di movimento ad esso, cambiare i tempi, magari scambiare lineare per facilitare, ma questo è un punto di partenza. Si prega di considerarlo una prova di concetto.

HTML:

a.play { 
 
    padding:6px 8px; 
 
    border-radius:4px; 
 
    background:#ccc; 
 
    border:1px solid #bbb; 
 
    text-decoration:none; 
 
    color:#111; 
 
    position:relative; 
 
    } 
 
a.play:focus:before, 
 
a.play:active:before { 
 
    Content:"+1"; 
 
    position:absolute; 
 
    top:-16px; 
 
    left:6px; 
 
    color:#006699; 
 
    font-weight:bold; 
 
     -webkit-animation: fadeinout 1.3s linear forwards; 
 
    animation: fadeinout 1.3s linear forwards; 
 
} 
 

 
@-webkit-keyframes fadeinout { 
 
    0%,100% { opacity: 0; } 
 
    10% { opacity: 1; } 
 
} 
 

 
@keyframes fadeinout { 
 
    0%,100% { opacity: 0; } 
 
    10% { opacity: 1; } 
 
}

<div style="height:60px;"></div> 
 
<a href="#" class="play">Play</a>