ボタンをクリックするとマーキーサイクルを1回行う方法は？

Question

私が達成しようとしているのは、ボタンをクリックするとマーキーが一度再生されるようにすることです。私の問題は、ループを1に設定すると、1回だけ再生してから何もしないということです。私の他の問題は、マウスの左ボタンを離すと、現在のコードで途中で停止することです。それとも、それがどこにあったかは分かりません。ボタンが押されたときに1回再生され、ボタンが再び押されると再び再生され、ループが完全に完了するようにする方法はありますか？ここにコードがありますが、私はhtmlの代わりにjavaスクリプトを使用しています。ここに私の現在のコードです：

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

Answer 1

あなたはそれを達成するために、CSS keyframesとjQuery（またはJavaScript）を使用することができます。

以下の例では、CSSルールを使用してアニメーション効果を実現し、JQueryを使用して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>