jQuery文本打字显示插件Typed.js

所属分类:输入-丰富的输入

 21359  289  查看评论 (1)
分享到微信朋友圈
X
jQuery文本打字显示插件Typed.js ie兼容10

Typed.js是我发现的一个很神奇的小工具。整个js插件虽然仅仅只有400行,但是这个插件的效果让人眼睛一亮。而且这个插件似乎支持bower,所以个个bower使用者也可以尽情使用。

我们一步一步来使用这个插件:

使用方法

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
    $(function(){
        $(".element").typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
    });
</script>
...
<span class="element"></span>

如果你想让你的输入光标闪起来:

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

如果你想使用html作为文本,那么:

$(".typed").typed({ strings: ["Sentence with <br>line break."] });

如果你想使用纯text作为文本,那么:

<span id="typed" style="white-space:pre"></span>
...
$(".typed").typed({ strings: ["Sentence with a\nline break."] });

如果你想在文本中停顿:

<script>
    $(function(){
        $(".element").typed({
            // Waits 1000ms after typing "First"
            strings: ["First ^1000 sentence.", "Second sentence."]
        });
    });
</script>

更多参数:

<script>
    $(function(){
        $(".element").typed({
            strings: ["First sentence.", "Second sentence."],
            // typing speed
            typeSpeed: 0,
            // time before typing starts
            startDelay: 0,
            // backspacing speed
            backSpeed: 0,
            // time before backspacing
            backDelay: 500,
            // loop
            loop: false,
            // false = infinite
            loopCount: false,
            // show cursor
            showCursor: true,
            // character for cursor
            cursorChar: "|",
            // attribute to type (null == text)
            attr: null,
            // either html or text
            contentType: 'html',
            // call when done callback function
            callback: function() {},
            // starting callback function before each string
            preStringTyped: function() {},
            //callback for every typed string
            onStringTyped: function() {},
            // callback for reset
            resetCallback: function() {}
        });
    });
</script>
相关插件-丰富的输入

jQuery云输入法

将QQ拼音,QQ五笔以及百度手写云输入法集成到网页
  丰富的输入
 37417  241

简洁的前端用户登陆注册界面

简洁的前端用户登陆注册界面,提供5种风格样式
  丰富的输入
 20603  214

jQuery模拟手机虚拟键盘

虚拟键盘在网络生活中很常见,比如使用网银或在线查询信用卡余额,在输入密码等敏感数据时,应该就会用到虚拟键盘。以防止被恶意程序捕获盗取实际键盘上的操作。
  丰富的输入
 17199  257

移动端canvas实现涂鸦效果

实现涂鸦基本功能、更改笔触大小颜色、更改背景图、橡皮檫、历史记录、清屏和保存功能。
  丰富的输入
 18020  264

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    德系大75 0
    2017/12/18 10:42:24

    如果文字只限一行,文字长度超出容易长度,容器外的字就看不到了

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复