Düğme düğmesine bir kez tıklatıldığında nasıl seçim yapılır?

Question

Neyi başarmaya çalıştığım, düğmeyi tıkladığımda bir seçim çerçevesinin oynatılmasıdır. Benim sorunum ise, eğer leri 1'e ayarlarsam, o zaman sadece bir kere çalar ve sonra hiçbir şey yapmaz. Diğer problemim, sol fare tuşunu bıraksam, geçerli kodumla ortada durmasıdır. Ya da olduğu yerde durur. Düğmeye basıldığında bir kez oynatılmasını sağlamak için herhangi bir yol var mı ve düğmeye tekrar basıldığında tekrar oynatın ve döngüyü tamamen tamamlamasına izin verin. İşte kod, html yerine java betiğini kullanmaya açıkım. İşte benim geçerli kod:

<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

Bunu başarmak için CSS keyframes ve JQuery (veya Javascript) kullanabilir. Aşağıdaki örnekte, animasyon efektini elde etmek için CSS kurallarını kullanıyorum ve JQuery'yi kullanarak span öğesini ekleme/çıkarma işlemini uygulayarak kullanıyorum.

Kod örnek:

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

saf CSS kullanmaya istekli misiniz?

Tıklamada bir "+1" sayaç istediğiniz gibi görünüyor. Bunu CSS geçişlerini kullanarak yapabilirsiniz. Bir girişten ziyade bir çapa kullanacağım, çünkü stil üzerinde daha fazla kontrol sahibi olacaksın.

Muhtemelen bazı hareketler eklemek isteyebilirsiniz, zamanlamayı değiştirebilir, belki doğrusallaştırmak için doğrusal olarak değiştirebilir, ancak bu bir başlangıç ​​noktasıdır. Lütfen bir kavram kanıtı olarak düşünün.

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>