Javascript，暂停打字机

Javascript, pausing a typewriter

本文关键字：打字机 暂停 Javascript      更新时间：2023-09-26

我有一个问题与我的javascript。我所面临的问题是，与我的一页网站。我有一个在div内运行的typewriter.js。我想要实现的是，当你向上或向下滚动时，打字机"冻结"(暂停)，当你滚动回页面时，打字机再次继续。

HTML打字机 

    <div class="type-o">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque consectetur pulvinar. Pellentesque a dapibus nisi.</p>
    </div>
Javascript onepage 

//section 1
if(anchorLink == 'Illusiveman'){
    $(".type-o").typewriter('typestart');
}
if ((index == 2 && direction == 'down') || (index == 2 && direction == 'up')){
    $(".type-o").typewriter('typepause');
}
Javascript打字机

    $.fn.typewriter = function(a) {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            var timer = setInterval(function() {
                if(a = 'typestart'){
                    $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                    if (progress >= str.length) clearInterval(timer);
                }else if(a == 'typepause'){
                    clearInterval(timer);
                }   
            }, 100);
        });     
    return this;
};

我现在所拥有的是，如果你离开内容…打字机继续工作，但是当您滚动回内容时，打字机又重新启动，就像在word中启用了插入一样。我现在没有主意了，所以我需要一些帮助。

    顺便说一下，我使用的是Jason Frame的Grab Bag打字机脚本。
  • 我创建了我的问题的实时预览按钮当然应该是滚动功能。http://jsbin.com/eguxev/134/edit?html、js、输出

谢谢!

已更新在修改代码后(参见您自己的代码)，您只需要将scroll事件绑定到您想要的任何元素，并且滚动将暂停类型

$( "yourelemntselector" ).scroll(function(){
    $(".type-o").typewriter('typepause');
});
相关文章：