jquery 입력 효과 삭제 중지-프런트엔드 Q&A-php.cn

jquery 입력 효과 삭제 중지

WBOY

풀어 주다： 2023-05-23 13:25:08

원래의

648명이 탐색했습니다.

인터넷의 대중화와 함께 타이핑 효과의 적용이 점점 더 널리 보급되고 있으며 jquery 타이핑 효과는 많은 웹 사이트 개발자의 첫 번째 선택이 되었습니다. 그러나 이러한 특수 효과를 구현하는 과정에서 특수 효과 입력의 삭제 문제 등 세부적인 문제가 사용자 경험에 영향을 미치는 경우가 많습니다. 이 기사에서는 jquery 입력 효과를 사용하여 삭제를 중지하고 사용자의 탐색 경험을 개선하는 방법을 소개합니다.

jquery 입력 효과는 typed.js 및 jQuery.Typewriter와 같은 미리 만들어진 플러그인을 사용하여 구현할 수 있습니다. 이러한 플러그인은 jquery를 기반으로 하며 사용하기 전에 jquery 라이브러리 파일을 가져와야 합니다. 다음은 typed.js를 예로 들어 jquery 입력 효과를 구현하는 방법을 간략하게 소개합니다.

먼저 HTML 페이지에 jquery 및 typed.js 라이브러리 파일을 도입해야 합니다.

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

로그인 후 복사

그런 다음 HTML 페이지에

요소를 만들어 타이핑 효과를 표시합니다.

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

로그인 후 복사

그런 다음 jquery를 사용하여 선택합니다. 요소는 브라우저에 의해 선택되며 typed.js의 초기화 기능을 사용하여 타이핑 효과를 구성합니다. 초기화 함수에서는 입력 속도, 삭제 속도, 커서 스타일, 입력할 텍스트 등의 매개변수를 설정할 수 있습니다.

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

로그인 후 복사

이제 간단한 jquery 입력 효과가 구현되었습니다. 그러나 사용자 경험 측면에서 여전히 해결해야 할 핵심 문제가 있는데, 바로 삭제입니다.

일반적으로 입력 효과가 텍스트 줄 입력을 마치면 커서가 일정 시간 동안 일시 중지된 다음 삭제되기 시작합니다. 그러나 삭제 과정에서 사용자가 마우스를 클릭하거나 키보드로 입력하는 등의 작업을 수행하면 사용자가 작업을 중지할 때까지 타이핑 효과가 삭제를 중지하므로 사용자의 탐색 경험에 영향을 미칩니다.

이 문제를 해결하려면 jquery를 사용하여 마우스 이벤트와 키보드 이벤트를 바인딩하고 typed.js의 API 기능을 사용하여 삭제를 중지해야 합니다.

먼저 타이핑 효과의 현재 상태를 저장하기 위한 변수를 정의해야 합니다. typed.js에서는 isRunning() 함수를 사용하여 타이핑 효과가 진행 중인지 확인할 수 있습니다. 따라서 초기화 함수에서 변수를 정의하고 이를 true로 할당하여 타이핑 효과가 진행 중임을 나타낼 수 있습니다.

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

로그인 후 복사

타이핑 효과 삭제 프로세스 중에 사용자의 마우스 이벤트 및 키보드 이벤트를 수신해야 합니다. . 사용자가 작업을 수행할 때 삭제를 중지해야 하며 타이핑 효과의 상태를 일시 중지로 설정해야 합니다. 사용자가 작업을 중지하면 삭제된 내용을 복원해야 하며 타이핑 효과 상태를 복구로 설정해야 합니다.

jquery를 사용하여 마우스 이벤트와 키보드 이벤트를 모니터링하려면 on() 메서드가 필요합니다. 초기화 함수의 $(window) 선택기에 mousedown, mousemove, keydown 및 keypress 이벤트를 바인딩할 수 있으며, 이러한 이벤트의 처리 함수에서는 isTyping 변수를 사용하여 타이핑 효과가 진행 중인지 확인합니다. 타이핑 효과가 진행 중인 경우 삭제를 중지하고 타이핑 효과 상태를 일시 정지로 설정하세요. 타이핑 효과가 일시정지 상태인 경우 마우스 이벤트, 키보드 이벤트는 무시되며 사용자가 작업을 중지할 때까지 삭제가 계속됩니다.

다음은 구현 코드입니다.

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

로그인 후 복사

위 코드에서는 입력 효과를 중지하고 다시 시작하기 위해 jquery의 토글() 메서드를 사용하고, 삭제를 구현하기 위해 백스페이스() 메서드를 사용합니다. 더 효율적입니다.

요약하자면, jquery를 사용하여 타이핑 효과를 구현하면 웹 사이트의 표시 효과와 사용자 경험을 향상시킬 수 있습니다. 삭제를 구현하는 과정에서 typed.js에서 제공하는 API 함수와 변수를 사용하여 입력 효과의 상태를 확인할 수 있을 뿐만 아니라 jquery의 마우스 이벤트 및 키보드 이벤트 바인딩 방법을 사용하여 삭제를 중지하고 좋은 사용자 경험을 유지할 수 있습니다.

위 내용은 jquery 입력 효과 삭제 중지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!