如何在单击按钮时制作一个字幕循环?
How to make a marquee cycle once at a button click?
我想要实现的是当我单击按钮时选取框播放一次。我的问题是,如果我将循环设置为 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 应用 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>
你愿意用纯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>
我想要实现的是当我单击按钮时选取框播放一次。我的问题是,如果我将循环设置为 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 应用 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>
你愿意用纯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>