Wie man einen Festzelt einmal auf Knopfdruck macht?

Question

Was ich versuche zu erreichen ist, dass ein Marquee einmal spielt, wenn ich auf den Knopf klicke. Mein Problem ist, dass wenn ich die Schleife auf 1 setze, es nur einmal spielt und dann nichts tut. Mein anderes Problem ist, dass es auf halbem Wege mit meinem aktuellen Code aufhört, wenn ich die linke Maustaste loslasse. Oder es hört auf, wo es war. Gibt es eine Möglichkeit, es entweder einmal abspielen zu lassen, wenn die Taste gedrückt wird, und es dann erneut abzuspielen, wenn die Taste erneut gedrückt wird, und die Schleife vollständig durchlaufen zu lassen. Hier ist der Code, ich bin offen für die Verwendung von Java-Skript anstelle von HTML. Hier ist meine aktuellen Code:

<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

können Sie CSS verwenden keyframes und JQuery (oder Javascript), um das zu erreichen.

Im folgenden Beispiel verwende ich CSS-Regeln, um den Animationseffekt zu erzielen, und verwende das Hinzufügen/Entfernen des span-Elements aus dem DOM mithilfe von JQuery.

Code-Beispiel:

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

Sind Sie bereit, reinen CSS zu benutzen?

Es scheint, als ob Sie einen "+1" -Zähler beim Klicken möchten. Sie können dies mithilfe von CSS-Übergängen erreichen. Ich werde einen Anker anstelle einer Eingabe verwenden, da Sie mehr Kontrolle über das Formatieren haben.

Sie werden wahrscheinlich etwas Bewegung hinzufügen wollen, das Timing ändern, vielleicht linear wechseln, um sich zu entspannen, aber das ist ein Anfangspunkt. Bitte beachten Sie es als Proof of Concept.

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>