WordPress-Plugin mit Javascript

Lesezeit: 2 Minuten

Jamie

Ich arbeite an einem WordPress-Plugin, das es einem Benutzer ermöglicht, eine Bild-URL einzugeben und Konami-Code. Wenn der Konami-Code eingegeben wird, erscheint ein Bild, aber ich kann es nicht animieren, ich bin mit jQuery und Javascript etwas nicht vertraut und fange gerade erst an, es zu lernen … Jede Hilfe wäre fantastisch!

<script type="text/javascript" charset="utf-8">
if ( window.addEventListener ) {
  var kkeys = [], konami = "{$this->opts['wpk_code']['current']}";
  window.addEventListener("keydown", function(e){
    kkeys.push( e.keyCode );
    if ( kkeys.toString().indexOf( konami ) >= 0 ){
     var elms=document.getElementById("konami").style;
     elms.display=(elms.display=="block")?"none":"block";
}
  }, true);
}
</script>

Spielen Sie mit einigen der Beispiele auf jQuery animieren() – Sie scheinen zu tun, was Sie wollen.

Ja, ich habe verschiedene Möglichkeiten ausprobiert, diese Funktion hinzuzufügen – aber wenn ich ‘var elms=document.getElementById(“konami”).style entferne; elms.display=(elms.display==”blockieren”)?”none”:”blockieren”;’ was die Anzeige anweist, von “none” auf “block” umzuschalten – das Bild wird nicht angezeigt, und wenn ich dem Code etwas hinzufüge, wird es nicht animiert.

– Jamie

11. Oktober 2011 um 13:51 Uhr
Ich verstehe – abhängig von Ihrer Animation können Sie .show() aufrufen oder so etwas wie $(‘#konami’).animate({ ‘opacity’: ‘show’ }, 1000 );

– agtb

11. Oktober 2011 um 14:04 Uhr
danke für die Seite, genau das habe ich gesucht!!

– Jamie

11. Oktober 2011 um 14:30 Uhr

Mattias Hagström

Versuche dies:

$('#inputField').keyup(function () {
            if ($(this).val().length > 0) {
                $('#konami').animate({
                    opacity: 1,
                    left: '50'
                }, 100); 
            }
            else {
                $('#konami').animate({
                    opacity: 0,
                    left: '0'
                }, 100); 
            }
        });

HTML:

<input type="text" id="inputField" />
<img src="https://stackoverflow.com/questions/7726620/..." id="konami" style="position:relative;" />

das fügt nur ein Eingabefeld hinzu und blendet das Bild aus … Wenn ein bestimmter Code vom Benutzer ausgeführt wird, sollte ein Bild auftauchen – was es tut, aber ich möchte animieren, damit es über die Seite gleitet.

– Jamie

11. Oktober 2011 um 13:46 Uhr
Dann sollten Sie sich die Animate-Methode in jquery ansehen. du findest es hier: api.jquery.com/animate

– Mattias Hagström

11. Oktober 2011 um 13:49 Uhr
Schauen Sie oben, ich habe einige neue Codezeilen hinzugefügt, die das Bild um 50 Pixel verschieben und verblassen. BEACHTEN SIE, dass die neue Eigenschaft style auf img – style=”position:relative;” ist kritisch.

– Mattias Hagström

11. Oktober 2011 um 14:00 Uhr
Danke! Ich habe es verstanden..<script> var kkeys = []; var konami = "{$this->opts['wpk_code']['current']}"; $(document).keydown(function(e) { kkeys.push(e.keyCode); if (kkeys.toString().indexOf(konami) >= 0) { kkeys = []; $(".konami").show(1000); } }); </script> <div class="konami" style="display: none"> <p class="konami2"> <img src="<?php echo $url?>" /> </p> </div>

– Jamie

11. Oktober 2011 um 14:18 Uhr
Großartig 🙂 Wenn Sie meine Antwort nützlich fanden, können Sie sie gerne markieren 🙂

– Mattias Hagström

11. Oktober 2011 um 14:25 Uhr

12162800cookie-checkWordPress-Plugin mit Javascript

#Abfrage #Javascript #Plugins #WordPress