Typed.js打字效果js库的几种应用方式(4)

fox/ 2023年04月03日/ 开源推荐/ 浏览 2052

之前我们分享过一个有趣而简单的动态打印字体插件——typed.js

关于typed.js,可以了解这篇文章

一个有趣而简单的动态打印字体插件——typed.js

这里我们会陆续给给大家说一下,Typed.js的几种实际应用方法,多掌握一些简单的前端技巧

1.基础应用,在静态HTML中使用(对 SEO 友好)
2.简单暂停打字效果
3.智能退格效果

4.在输入框(input)种使用typed.js

typed.js不仅能在普通块容器中使用,也可以应用在input表单容器中,在实际应用中可以增强提示效果。当input为焦点状态,自动输入打字效果效果会暂停,当焦点离开input,打字效果会继续。如下所示




var typed4 = new Typed('#typed4', {
    strings: ['Some strings without', 'Some HTML', 'Chars'],
    typeSpeed: 0,
    backSpeed: 0,
    attr: 'placeholder',
    bindInputFocusEvents: true,
    loop: true
  });
    


attr: 'placeholder',指定用strings内容替换placeholder

bindInputFocusEvents: true,捕获焦点状态


发表评论

暂无评论,抢个沙发...

客服 工单