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