jquery typing effects stop deleting-Front-end Q&A-php.cn

jquery typing effects stop deleting

WBOY

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

Original

657 people have browsed it

With the popularization of the Internet, the application of typing effects is becoming more and more widespread, and jquery typing effects have become the first choice of many website developers. However, in the process of realizing this special effect, detailed issues often affect the user experience, such as the problem of deletion of typing special effects. This article will introduce how to use jquery typing effects to stop deletion and improve the user's browsing experience.

Jquery typing effects can be implemented using ready-made plug-ins, such as typed.js and jQuery.Typewriter. These plug-ins are based on jquery, and you need to import the jquery library file before using them. The following takes typed.js as an example to briefly introduce how to implement jquery typing effects.

First, you need to introduce the jquery and typed.js library files into the HTML page:

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

Copy after login

Then, create a

element in the HTML page to display typing effects:

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

Copy after login

Then, use the jquery selector to select the element, and use the initialization function of typed.js to configure the typing effects. In the initialization function, you can set parameters such as typing speed, deletion speed, cursor style, and text to be typed:

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

Copy after login

At this point, a simple jquery typing effect has been implemented. However, in terms of user experience, there is still a key issue that needs to be solved, and that is deletion back.

Generally speaking, when the typing effect finishes typing a line of text, the cursor will pause for a period of time and then start deleting. However, during the deletion process, if the user performs an operation, such as clicking the mouse or typing on the keyboard, the typing effect will stop the deletion until the user stops the operation, which will affect the user's browsing experience.

In order to solve this problem, we need to use jquery to bind mouse events and keyboard events, and the API function of typed.js to stop deletion.

First, we need to define a variable to save the current status of the typing effects. In typed.js, you can use the isRunning() function to determine whether the typing effect is in progress. Therefore, we can define a variable in the initialization function and assign it to true, indicating that the typing effect is in progress:

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

Copy after login

During the deletion process of the typing effect, we need to listen to the user's mouse events and Keyboard events. When the user performs the operation, the deletion needs to be stopped and the status of the typing effects must be set to paused. When the user stops the operation, the deletion needs to be restored and the status of the typing effect needs to be set to recovery.

Using jquery to monitor mouse events and keyboard events requires the on() method. We can bind the mousedown, mousemove, keydown and keypress events to the $(window) selector in the initialization function, and in the processing functions of these events, use the isTyping variable to determine whether the typing effect is in progress. If the typing effect is in progress, stop deleting and set the status of the typing effect to paused. If the typing effect is in a paused state, mouse events and keyboard events are ignored and deletion continues until the user stops the operation.

The following is the implementation code:

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

Copy after login

In the above code, we use jquery's toggle() method to stop and resume typing effects, and the backspace() method to realize deletion. Compared with the manual implementation method, it is more concise.

To summarize, using jquery to achieve typing effects can improve the display effect and user experience of the website. In the process of implementing deletion, you can stop deletion and maintain a good user experience by using the API functions provided by typed.js and variables to determine the status of typing effects, as well as jquery's mouse event and keyboard event binding methods.

The above is the detailed content of jquery typing effects stop deleting. For more information, please follow other related articles on the PHP Chinese website!