Как сделать цикл выделения одним нажатием кнопки?

Question

То, что я пытаюсь достичь, так это, что шатер играет один раз, когда я нажимаю кнопку. Моя проблема заключается в том, что если я устанавливаю цикл в 1, он воспроизводится только один раз, а затем ничего не делает. Моя другая проблема в том, что она останавливается на полпути с моим текущим кодом, если я отпущу левую кнопку мыши. Или он останавливается там, где он был. Есть ли способ заставить его играть один раз, когда нажимается кнопка, а затем снова воспроизводиться всякий раз, когда кнопка снова нажата и позволяет полностью завершить цикл. Вот код, я открыт для использования java-скрипта вместо html. Вот мой текущий код:

<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

Вы можете использовать CSS keyframes и JQuery (или JavaScript) для того, чтобы добиться этого.

В приведенном ниже примере я использую правила CSS для достижения эффекта анимации и применения его добавления/удаления элемента span из te DOM с помощью JQuery.

Пример кода:

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

Готовы ли вы использовать чистый CSS?

Кажется, что вам нужен счетчик «+1» при нажатии. Вы можете выполнить это с помощью переходов CSS. Я собираюсь использовать якорь, а не вход, потому что у вас больше контроля над стилем.

Возможно, вам захочется добавить к нему какое-то движение, изменить время, возможно, поменять линейность на простоту, но это отправная точка. Пожалуйста, считайте это доказательством концепции.

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>