jQueryのタイピング効果による削除の停止-フロントエンドQ&A-php.cn

jQueryのタイピング効果による削除の停止

WBOY

リリース： 2023-05-23 13:25:08

オリジナル

609 人が閲覧しました

インターネットの普及に伴い、タイピング効果の適用はますます広く普及しており、jquery タイピング効果は多くの Web サイト開発者にとって最初の選択肢となっています。しかし、この特殊効果を実現する過程では、タイピング特殊効果の削除問題など、細かい問題がユーザーエクスペリエンスに影響を与えることがよくあります。この記事では、jquery タイピング効果を使用して削除を停止し、ユーザーのブラウジングエクスペリエンスを向上させる方法を紹介します。

JQuery タイピング効果は、typed.js や jQuery.Typewriter などの既製のプラグインを使用して実装できます。これらのプラグインは jquery に基づいているため、使用する前に jquery ライブラリファイルをインポートする必要があります。以下では、typed.js を例として、jquery タイピング効果を実装する方法を簡単に紹介します。

まず、jquery および typed.js ライブラリファイルを HTML ページに導入する必要があります:

<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() メソッドが必要です。初期化関数で、mousedown、mousemove、keydown、keypress イベントを $(window) セレクターにバインドでき、これらのイベントの処理関数で 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 の toggle() メソッドを使用し、削除を実現するために backspace() メソッドを使用しています。手動実装方法を使用すると、より簡潔になります。

要約すると、jquery を使用して入力効果を実現すると、Web サイトの表示効果とユーザーエクスペリエンスを向上させることができます。削除の実装プロセスでは、typed.js によって提供される API 関数と入力効果のステータスを決定する変数、および jquery のマウスイベントおよびキーボードイベントバインディングメソッドを使用することで、削除を停止し、良好なユーザーエクスペリエンスを維持できます。

以上がjQueryのタイピング効果による削除の停止の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。