如何在按钮点击时进行一次选取框循环？

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关键帧和 JQuery（或 Javascript）来实现这一点。

在下面的示例中，我使用 CSS 规则来实现动画效果，并使用 JQuery 从 DOM 中添加/删除 span 元素。

代码示例：

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>