JQuery-Eingabeeffekte werden nicht mehr gelöscht-Front-End-Fragen und Antworten-php.cn

JQuery-Eingabeeffekte werden nicht mehr gelöscht

WBOY

Freigeben： 2023-05-23 13:25:08

Original

658 Leute haben es durchsucht

Mit der Popularität des Internets wird die Anwendung von Tippeffekten immer weiter verbreitet, und JQuery-Tippeffekte sind für viele Website-Entwickler zur ersten Wahl geworden. Bei der Realisierung dieses Spezialeffekts wirken sich jedoch häufig Details auf die Benutzererfahrung aus, beispielsweise das Problem beim Löschen von Tippeffekten. In diesem Artikel wird erläutert, wie Sie mithilfe von JQuery-Eingabeeffekten das Löschen stoppen und das Surferlebnis des Benutzers verbessern können.

JQuery-Typing-Effekte können mit vorgefertigten Plug-Ins wie typed.js und jQuery.Typewriter implementiert werden. Diese Plug-Ins basieren auf JQuery und Sie müssen die JQuery-Bibliotheksdatei importieren, bevor Sie sie verwenden können. Im Folgenden wird typed.js als Beispiel verwendet, um kurz vorzustellen, wie JQuery-Typisierungseffekte implementiert werden.

Zuerst müssen Sie die Bibliotheksdateien jquery und typed.js in die HTML-Seite einfügen:

<script src="jquery.min.js"></script>
<script src="typed.min.js"></script>

Nach dem Login kopieren

Dann erstellen Sie ein

-Element in der HTML-Seite Tippeffekte anzeigen:

<div id="typewriter"></div>

Nach dem Login kopieren

Verwenden Sie dann den JQuery-Selektor, um das Element auszuwählen, und verwenden Sie die Initialisierungsfunktion von typed.js, um die Tippeffekte zu konfigurieren. In der Initialisierungsfunktion können Sie Parameter wie Tippgeschwindigkeit, Löschgeschwindigkeit, Cursorstil und einzugebenden Text festlegen:

<script>
$(function(){
    $("#typewriter").typed({
        strings:["Hello world!","This is a jquery typewriter effect demo."],
        typeSpeed: 120,     //打字速度
        backSpeed: 50,      //回删速度
        cursorChar: "|",    //光标样式
        loop: true          //是否循环
    });
});
</script>

Nach dem Login kopieren

Zu diesem Zeitpunkt wurde ein einfacher JQuery-Eingabeeffekt implementiert. Im Hinblick auf die Benutzererfahrung gibt es jedoch immer noch ein zentrales Problem, das gelöst werden muss, und zwar das Zurücklöschen.

Wenn der Tippeffekt mit der Eingabe einer Textzeile fertig ist, bleibt der Cursor im Allgemeinen eine Zeit lang stehen und beginnt dann mit dem Löschen. Wenn der Benutzer jedoch während des Löschvorgangs einen Vorgang ausführt, z. B. mit der Maus klickt oder auf der Tastatur tippt, stoppt der Tippeffekt den Löschvorgang, bis der Benutzer den Vorgang stoppt, was sich auf das Surferlebnis des Benutzers auswirkt.

Um dieses Problem zu lösen, müssen wir jquery verwenden, um Mausereignisse und Tastaturereignisse zu binden, und die API-Funktion von typed.js verwenden, um das Löschen zu stoppen.

Zuerst müssen wir eine Variable definieren, um den aktuellen Status der Tippeffekte zu speichern. In typed.js können Sie die Funktion isRunning() verwenden, um festzustellen, ob der Tippeffekt ausgeführt wird. Daher können wir in der Initialisierungsfunktion eine Variable definieren und ihr true zuweisen, um anzuzeigen, dass der Tippeffekt ausgeführt wird:

$(function(){
    var isTyping = true;    //打字特效正在进行中
    $("#typewriter").typed({
        strings:["Hello world!","This is a jquery typewriter effect demo."],
        typeSpeed: 120,
        backSpeed: 50,
        cursorChar: "|",
        loop: true,
        onTypingPaused: function(){  //打字特效暂停事件
            isTyping = false;   //设置打字特效状态为暂停
        },
        onTypingResumed: function(){ //打字特效恢复事件
            isTyping = true;    //设置打字特效状态为恢复
        },
        onTypingStopped: function(){ //打字特效停止事件
            isTyping = false;   //设置打字特效状态为停止
        }
    });
});

Nach dem Login kopieren

Während des Löschvorgangs des Tippeffekts müssen wir den Benutzer überwachen Mausereignisse und Tastaturereignisse. Wenn der Benutzer Vorgänge ausführt, muss er den Löschvorgang stoppen und den Status der Tippeffekte auf „Pause“ setzen. Wenn der Benutzer den Vorgang stoppt, muss die Löschung wiederhergestellt und der Status des Tippeffekts auf „Wiederherstellung“ gesetzt werden.

Die Verwendung von jquery zum Überwachen von Maus- und Tastaturereignissen erfordert die Methode on(). Wir können die Ereignisse „mousedown“, „mousemove“, „keydown“ und „keypress“ an den $(window)-Selektor in der Initialisierungsfunktion binden und in den Verarbeitungsfunktionen dieser Ereignisse die Variable isTyping verwenden, um zu bestimmen, ob der Tippeffekt ausgeführt wird. Wenn der Tippeffekt läuft, stoppen Sie den Löschvorgang und setzen Sie den Status des Tippeffekts auf „Pause“. Wenn der Tippeffekt angehalten ist, werden Maus- und Tastaturereignisse ignoriert und der Löschvorgang wird fortgesetzt, bis der Benutzer den Vorgang stoppt.

Das Folgende ist der Implementierungscode:

$(function(){
    var isTyping = true;    //打字特效正在进行中
    $("#typewriter").typed({
        strings:["Hello world!","This is a jquery typewriter effect demo."],
        typeSpeed: 120,
        backSpeed: 50,
        cursorChar: "|",
        loop: true,
        onTypingPaused: function(){  //打字特效暂停事件
            isTyping = false;   //设置打字特效状态为暂停
        },
        onTypingResumed: function(){ //打字特效恢复事件
            isTyping = true;    //设置打字特效状态为恢复
        },
        onTypingStopped: function(){ //打字特效停止事件
            isTyping = false;   //设置打字特效状态为停止
        }
    });

    $(window).on("mousedown mousemove keydown keypress", function(event){
        //当打字特效正在进行中时
        if(isTyping){
            $("#typewriter").typed("toggle");    //停止回删
            isTyping = false;   //设置打字特效状态为暂停
        }
        //当打字特效处于暂停状态时
        else{
            isTyping = true;    //设置打字特效状态为恢复
            $("#typewriter").typed("backspace"); //恢复回删
            $("#typewriter").typed("toggle");    //继续回删
        }
    });
});

Nach dem Login kopieren

Im obigen Code verwenden wir die toggle()-Methode von jquery, um Tippeffekte anzuhalten und fortzusetzen, und die backspace()-Methode, um Die Implementierung des Rücklöschens ist präziser als die manuelle Implementierung.

Zusammenfassend lässt sich sagen, dass die Verwendung von JQuery zum Erzielen von Tippeffekten den Anzeigeeffekt und die Benutzererfahrung der Website verbessern kann. Bei der Implementierung des Löschvorgangs können wir die von typed.js bereitgestellten API-Funktionen und Variablen verwenden, um den Status von Tippeffekten zu ermitteln, sowie die Bindungsmethoden für Mausereignisse und Tastaturereignisse von jquery, um den Löschvorgang zu stoppen und eine gute Benutzererfahrung aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonJQuery-Eingabeeffekte werden nicht mehr gelöscht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!