如何使按钮点击一次选框循环一次？

我想要实现的是当点击按钮时，一个选取框会播放一次。 我的问题是，如果我将循环设置为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()">

---

您可以使用CSS关键帧和JQuery（或Javascript）来完成此操作。

在下面的示例中，我使用CSS规则来实现动画效果，并将其应用于使用JQuery添加/删除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>

---

你是否愿意使用纯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>

链接地址: http://www.djcxy.com/p/91425.html

上一篇: How to make a marquee cycle once at a button click?

下一篇: How do you create an instance of an instance in JavaScript