Question

我想要实现的是，当我点击按钮时，选取框会播放一次。我的问题是，如果我将循环设置为1，那么它只播放一次然后什么都不做。我的另一个问题是，如果我放开鼠标左键，它会在当前代码中途停止。或者它停在原处。是否有任何方法可以在按下按钮时播放一次，然后在再次按下按钮时再次播放并允许它完全完成循环。这是代码，我愿意使用java脚本而不是html。这是我目前的代码：

＆＃13;

<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()">

＆＃13;

Answer 1

您可以使用CSS keyframes和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>

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>

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

2 个答案: