如何在单击按钮时制作一个字幕循环？

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 规则来实现动画效果，并使用 JQuery 应用 adding/removing 来自 te 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>

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>

如何在单击按钮时制作一个字幕循环？

How to make a marquee cycle once at a button click?

html

javascript

css

marquee