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