les effets de frappe jquery arrêtent de supprimer

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

Ensuite, utilisez jquery pour sélectionner L'élément est sélectionné par le navigateur et la fonction d'initialisation de typed.js est utilisée pour configurer les effets de frappe. Dans la fonction d'initialisation, vous pouvez définir des paramètres tels que la vitesse de frappe, la vitesse de suppression, le style du curseur et le texte à saisir :

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

À ce stade, un simple effet de saisie jquery a été implémenté. Cependant, en termes d’expérience utilisateur, il reste encore un problème clé à résoudre, à savoir la suppression.

De manière générale, lorsque l'effet de frappe termine de taper une ligne de texte, le curseur s'arrête pendant un certain temps, puis commence à supprimer. Cependant, pendant le processus de suppression, si l'utilisateur effectue une opération, telle qu'un clic de souris ou une saisie sur le clavier, l'effet de frappe arrêtera la suppression jusqu'à ce que l'utilisateur arrête l'opération, ce qui affectera son expérience de navigation.

Afin de résoudre ce problème, nous devons utiliser jquery pour lier les événements de souris et de clavier, ainsi que la fonction API de typed.js pour arrêter la suppression.

Tout d'abord, nous devons définir une variable pour enregistrer l'état actuel de l'effet de frappe. Dans typed.js, vous pouvez utiliser la fonction isRunning() pour déterminer si l'effet de frappe est en cours. Par conséquent, nous pouvons définir une variable dans la fonction d'initialisation et lui attribuer la valeur true, indiquant que l'effet de frappe est en cours :

$(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;   //设置打字特效状态为停止
        }
    });
});

Pendant le processus de suppression de l'effet de frappe, nous devons écouter les événements de souris et de clavier de l'utilisateur . Lorsque l'utilisateur effectue l'opération, la suppression doit être arrêtée et l'état des effets de frappe doit être mis en pause. Lorsque l'utilisateur arrête l'opération, la suppression doit être restaurée et l'état de l'effet de saisie doit être défini sur récupération.

L'utilisation de jquery pour surveiller les événements de la souris et du clavier nécessite la méthode on(). Nous pouvons lier les événements mousedown, mousemove, keydown et keypress au sélecteur $(window) dans la fonction d'initialisation, et dans les fonctions de traitement de ces événements, utiliser la variable isTyping pour déterminer si l'effet de frappe est en cours. Si l'effet de frappe est en cours, arrêtez la suppression et définissez l'état de l'effet de frappe sur pause. Si l'effet de frappe est en pause, les événements de souris et de clavier sont ignorés et la suppression se poursuit jusqu'à ce que l'utilisateur arrête l'opération.

Voici le code d'implémentation :

$(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");    //继续回删
        }
    });
});

Dans le code ci-dessus, nous utilisons la méthode toggle() de jquery pour arrêter et reprendre les effets de frappe, et la méthode backspace() pour réaliser la suppression. Par rapport à la méthode d'implémentation manuelle, c'est le cas. plus efficace.

Pour résumer, l'utilisation de jquery pour implémenter des effets de frappe peut améliorer l'effet d'affichage et l'expérience utilisateur du site Web. Dans le processus d'implémentation de la suppression, nous pouvons utiliser les fonctions API fournies par typed.js et les variables pour déterminer l'état des effets de frappe, ainsi que les méthodes de liaison des événements de souris et d'événement de clavier de jquery, pour arrêter la suppression et maintenir une bonne expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!