jQ模擬打字效果插件typetype

時間 2019-12-05

原文原文鏈接

typetype是一個jquery插件,能夠模擬人類的打字效果。html

效果圖以下所示：jquery

查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type.html

使用

$('textarea').typetype('Some text that you want to demo')

被插入的標籤能夠是 input 、textarea 或其餘HTML 標籤git

自定義使用插件

$('textarea').typetype(
  'Text to append', // 模擬文本
  {
    e: 0.04, // 錯誤率 ( e=0 表示沒有錯誤)
    t: 100, // 打字間隔時間 （毫秒）
    keypress: function (){
      // 每打一個字以後調用該方法（包括出錯回退的時候）。 
    },
    callback: function (){
      // 完成後調用
    }
  }
)

插件的刪除效果

前提是 textarea 中包含了文本。。。github

$('textarea').backspace(
  14, // 要刪除的字數
  {
    t: 100, // 刪除間隔時間 （毫秒）
    keypress: function (){ },
    callback: function (){ }
  }
)

結合jquery 動畫一塊兒使用

$('textarea')
  .typetype('Hello, world!')
  .delay(1000)
  .typetype('\n\nGoodbye.')
  .backspace(25)
  .fadeOut()

查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type.html

實例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery.Type</title>
    <script src="jquery.js"></script>
    <script src="jquery.typetype.js"></script>
</head>
<body>
<textarea name="" id="txt1" cols="30" rows="10"></textarea>
<br>
<textarea name="" id="txt2" cols="30" rows="10"></textarea>
<br>
<textarea name="" id="txt3" cols="30" rows="10">
    這是測試文本，這是測試文本，這是測試文本，這是測試文本
</textarea>
<br>
<textarea name="" id="txt4" cols="30" rows="10"></textarea>
<script>
    $('#txt1').typetype('Some text that you want to demo');
    $('#txt2').typetype(
            '這是一段測試文字',
            {
                e: 0.04, // error rate. (use e=0 for perfect typing)
                t: 100, // interval between keypresses
                keypress: function (){
                    //alert("1")// called after every keypress (this may be an erroneous keypress!)
                },
                callback: function (){
                    alert('1')// the `this` keyword is bound to the particular element.
                }
            }
    );
    $('#txt3').backspace(
            14, // number of chars to backspace
            {
                t: 100, // interval between keypresses
                keypress: function (){ },
                callback: function (){ }
            }
    );
    $('#txt4')
            .typetype('Hello, world!')
            .delay(1000)
            .typetype('\n\nGoodbye.')
            .backspace(25)
            .fadeOut()
</script>
</body>
</html>