ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryのタイピング効果による削除の停止
インターネットの普及に伴い、タイピング効果の適用はますます広く普及しており、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 ページに dc6dce4a544fdca2df29d5ac0ea9906b 要素を作成して、入力効果を表示します。
<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 サイトの他の関連記事を参照してください。