從數組輸入動畫 Javascript HTML 旋轉

Question

我在 html 網頁上有一個打字動畫。 我想旋轉數組中的文本，但要確保數組中的每一項都保留在頁面上，而不是在下一項開始之前被刪除。

 var TxtRotate = function (el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function () { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function () { that.tick(); }, delta); }; window.onload = function () { var elements = document.getElementsByClassName('txt-rotate'); for (var i = 0; i < elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); };

 <h1> We develop <span class="txt-rotate" data-period="2000" data-rotate='[ "websites.", "databases.", "in HTML and CSS.", "in ASP.NET.", "in C#.", "using Bootstrap."]'></span> </h1>

預期輸出：

We develop websites.
           databases.
           in HTML and CSS.
           in ASP.NET
           in C#.
           using Bootstrap.

在開始鍵入下一項之前，需要先鍵入數組中的每一項。 一旦所有項目都被輸入，它需要作為一個列表留在頁面上，動畫應該停止而不是重復。

Answer 1

 var TxtRotate = function (el, toRotate, period, fixedText) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.fixedText=fixedText; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function () { //Stops when text completes if(this.loopNum >= this.toRotate.length) return; var i = this.loopNum; var fullTxt = this.toRotate[i]; // Get the letter to substring that needs to be appended in the span this.txt = fullTxt.substring(0, this.txt.length + 1); if(this.loopNum === 0) { this.el.innerHTML = '<span class="wrap">' +this.fixedText+' '+ this.txt + '</span>'; }else{ //adds a letter on the screen var spacing = ''; var countSpacing = 0 while(countSpacing < (this.fixedText.length * 2) + 1) {spacing = spacing+"&nbsp;"; countSpacing++;} this.el.innerHTML = '<span class="wrap">' +spacing+ this.txt + '</span>'; } var that = this; //calculates the time to wait before writing next letter var delta = 300 - Math.random() * 100; // If backspacing reduce it by half if (this.isDeleting) { delta /= 2; } // If the word is complete if (!this.isDeleting && this.txt === fullTxt) { //add a delay of 500mx delta = 500; // add a new line (</br> this.el.innerHTML = `<span class="wrap">${this.el.textContent}</br></span>`; // add a sibling element to you element var next_txt=document.createElement("span"); // add sibling element to the parent this.el.parentNode.appendChild(next_txt); // make your self new element, so that it writes into the new element next time this.el = next_txt; // pick the next word this.loopNum++; //clear current txt this.txt = ''; } setTimeout(function () { that.tick(); }, delta); }; window.onload = function () { var elements = document.getElementsByClassName('txt-rotate'); for (var i = 0; i < elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); var fixedText = elements[i].getAttribute('data-fixed'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period, fixedText); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); };

 <h1> <span class="txt-rotate" data-period="2000" data-fixed="We develop" data-rotate='[ "websites.", "databases.", "in HTML and CSS.", "in ASP.NET.", "in C#.", "using Bootstrap."]'></span> </h1>

看看這是否是你想要的@RA