Question

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

'2'

Answer 1

以下是来自网站的提取库的JSFiddle：This tutorial

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

<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

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

2 个答案: