如何使用 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