kesan menaip jquery berhenti memadam

Dengan populariti Internet, kesan menaip semakin digunakan secara meluas, dan kesan menaip jquery telah menjadi pilihan pertama banyak pembangun laman web. Walau bagaimanapun, dalam proses merealisasikan kesan khas ini, isu terperinci sering menjejaskan pengalaman pengguna, seperti masalah pemadaman kesan khas menaip. Artikel ini akan memperkenalkan cara menggunakan kesan menaip jquery untuk menghentikan pemadaman dan meningkatkan pengalaman menyemak imbas pengguna.

Kesan menaip Jquery boleh dilaksanakan menggunakan pemalam siap pakai, seperti typed.js dan jQuery.Typewriter. Pemalam ini adalah berdasarkan jquery, dan anda perlu mengimport fail perpustakaan jquery sebelum menggunakannya. Berikut mengambil typed.js sebagai contoh untuk memperkenalkan secara ringkas cara melaksanakan kesan menaip jquery.

Pertama, anda perlu memperkenalkan fail perpustakaan jquery dan typed.js ke dalam halaman HTML:

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

Kemudian, cipta elemen dc6dce4a544fdca2df29d5ac0ea9906b

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

Kemudian, gunakan pemilih jquery untuk memilih elemen dan gunakan fungsi permulaan typed.js untuk mengkonfigurasi kesan menaip. Dalam fungsi permulaan, anda boleh menetapkan parameter seperti kelajuan menaip, kelajuan pemadaman, gaya kursor dan teks untuk ditaip:

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

Pada ketika ini, kesan menaip jquery yang mudah telah dilaksanakan. Walau bagaimanapun, dari segi pengalaman pengguna, masih terdapat isu utama yang perlu diselesaikan, iaitu pemadaman semula.

Secara umumnya, apabila kesan menaip selesai menaip baris teks, kursor akan berhenti seketika untuk satu tempoh masa dan kemudian mula memadam. Walau bagaimanapun, semasa proses pemadaman, jika pengguna melakukan operasi, seperti mengklik tetikus atau menaip pada papan kekunci, kesan menaip akan menghentikan pemadaman sehingga pengguna menghentikan operasi, yang akan menjejaskan pengalaman menyemak imbas pengguna.

Untuk menyelesaikan masalah ini, kita perlu menggunakan jquery untuk mengikat acara tetikus dan acara papan kekunci, dan fungsi API typed.js untuk menghentikan pemadaman.

Pertama, kita perlu menentukan pembolehubah untuk menyimpan status semasa kesan menaip. Dalam typed.js, anda boleh menggunakan fungsi isRunning() untuk menentukan sama ada kesan menaip sedang dijalankan. Oleh itu, kita boleh mentakrifkan pembolehubah dalam fungsi permulaan dan menetapkannya kepada benar, menunjukkan bahawa kesan menaip sedang berjalan:

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

Semasa proses pemadaman kesan menaip, kita perlu mendengar tetikus pengguna acara dan acara Papan Kekunci. Apabila pengguna melakukan operasi, mereka perlu berhenti memadam dan menetapkan status kesan menaip untuk dijeda. Apabila pengguna menghentikan operasi, pemadaman perlu dipulihkan dan status kesan menaip perlu ditetapkan kepada pemulihan.

Menggunakan jquery untuk memantau acara tetikus dan acara papan kekunci memerlukan kaedah on(). Kita boleh mengikat peristiwa turun tetikus, gerak tetikus, kekunci dan tekan kekunci pada pemilih $(window) dalam fungsi permulaan, dan dalam fungsi pemprosesan peristiwa ini, gunakan pembolehubah isTyping untuk menentukan sama ada kesan menaip sedang dijalankan. Jika kesan menaip sedang berjalan, hentikan pemadaman dan tetapkan status kesan menaip kepada dijeda. Jika kesan menaip berada dalam keadaan dijeda, acara tetikus dan acara papan kekunci diabaikan dan pemadaman diteruskan sehingga pengguna menghentikan operasi.

Berikut ialah kod pelaksanaan:

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

Dalam kod di atas, kami menggunakan kaedah toggle() jquery untuk menghentikan dan menyambung semula kesan menaip, dan kaedah backspace() untuk merealisasikan pemadaman dengan kaedah pelaksanaan manual, ia lebih ringkas.

Untuk meringkaskan, menggunakan jquery untuk melaksanakan kesan menaip boleh meningkatkan kesan paparan dan pengalaman pengguna tapak web. Dalam proses melaksanakan pemadaman, kami boleh menggunakan fungsi API yang disediakan oleh typed.js dan pembolehubah untuk menentukan status kesan menaip, serta kaedah pengikatan acara tetikus dan papan kekunci jquery, untuk menghentikan pemadaman dan mengekalkan pengalaman pengguna yang baik.

Atas ialah kandungan terperinci kesan menaip jquery berhenti memadam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!