如何使用 jQuery/JavaScript 复制打字效果？

Question

如何在此页面上使用确切的打字效果？ https://www.braintreepayments.com/

<span class="writer" data-writer-command="['PayPal?', 'Apple Pay?', 'Venmo?', 'Bitcoin?']">Ve</span>

Answer 1

这是带有从网站提取的库的 JSFiddle： http : //jsfiddle.net/8g6dsp0p/1/

您可以使用以下代码初始化脚本：

<span class="writer" data-writer-command="['PayPal?', 'Apple Pay?', 'Venmo?', 'Bitcoin?']"></span>

<script>
$(document).ready(function() {
   new Writer
});
</script>

Answer 2

var word = "Venmo";
var cur = 1;
var intrvl = setInterval(function () {
   $('.writer').html(word.slice(0,cur));
   if(cur >= word.length) {
clearInterval(intrvl);
  }
  else{
   cur++;
  }
}, 500);

JSBin

上面的jsBin有你需要的代码。 它的格式不整齐，但代码是正确的。 再次重现代码

<span clas="writer"></span>


    var words = ["Venmo", "alright", "done", "ok"];
var curWord = 0;



function writeWord(word, deleteWord) {
  var cur;
  if(deleteWord){    
    cur = deleteWord.length;
    var delIntrvl = setInterval(function () {

     if(!cur) {
      clearInterval(delIntrvl);
       if(curWord < (words.length - 1)) {
         writeWord(words[++curWord],"");  
       } 
       else {//if you dont need continous looping remove this else statement
         curWord = 0;
         writeWord(words[curWord],"");  
       }      
    }
    else{
      var reqWrd = deleteWord.slice(0,cur);
      console.log(reqWrd);
     $('.writer').html(reqWrd);
     cur--;
    }
    }, 200);
  }
  else {
    cur=1;
    var intrvl = setInterval(function () { 

     if(cur >= word.length) {
      clearInterval(intrvl);       
       writeWord("",word);
    }
    else{
      var reqWrd = word.slice(0,cur);
      console.log(reqWrd);
     $('.writer').html(reqWrd);
     cur++;
    }
    }, 200);


     }


        }

        writeWord(words[curWord], "");

更新的代码，也为连续循环提供jsBin ContinousLoopJsBin