बटन पर एक बार मार्की चक्र कैसे बनाएं क्लिक करें?

Question

जो मैं हासिल करने की कोशिश कर रहा हूं वह है कि जब मैं बटन पर क्लिक करता हूं तो एक मार्की एक बार खेलता है। मेरी समस्या यह है कि अगर मैं लूप को 1 पर सेट करता हूं तो यह केवल एक बार खेलता है और फिर कुछ भी नहीं करता है। मेरी दूसरी समस्या यह है कि अगर मैं बाएं माउस बटन को छोड़ देता हूं तो यह मेरे वर्तमान कोड के साथ मिडवे बंद हो जाता है। या यह बंद हो जाता है जहां यह था। बटन दबाए जाने पर इसे या तो खेलने के लिए कोई तरीका है और फिर जब भी बटन दबाया जाता है तब उसे फिर से चलाएं और इसे लूप को पूरी तरह से पूरा करने दें। यहां कोड है, मैं 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()">

Answer 1

आपको लगता है कि पूरा करने के लिए आदेश में सीएसएस keyframes और JQuery (या जावास्क्रिप्ट) का उपयोग कर सकते हैं।

नीचे दिए गए उदाहरण में, मैं एनीमेशन प्रभाव प्राप्त करने के लिए सीएसएस नियमों का उपयोग कर रहा हूं, और इसे JQuery का उपयोग करके टीओओएम से स्पैन तत्व को जोड़ने/निकालने का उपयोग कर रहा हूं।

कोड उदाहरण:

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

आप शुद्ध सीएसएस का उपयोग करने के लिए तैयार हैं?

ऐसा लगता है कि आप क्लिक पर "+1" काउंटर चाहते हैं। आप इसे सीएसएस संक्रमण का उपयोग करके पूरा कर सकते हैं। मैं एक इनपुट के बजाय एक एंकर का उपयोग करने जा रहा हूं, क्योंकि आपके पास स्टाइलिंग पर अधिक नियंत्रण है।

आप शायद इसमें कुछ आंदोलन जोड़ना चाहते हैं, समय बदल सकते हैं, शायद आसानी से बाहर निकलने के लिए रैखिक स्वैप कर सकते हैं, लेकिन यह एक प्रारंभिक बिंदु है। कृपया इसे अवधारणा का सबूत मानें।

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>