代码之家 › 专栏 › 技术社区 › RA19

从数组中键入动画Javascript HTML旋转

html javascript

RA19 · 技术社区 · 7 年前

我在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.

在开始键入下一个项目之前,需要先键入数组中的每个项目。一旦输入了所有项目,它需要作为列表留在页面上,动画应该停止,而不是重复。

1 回复 | 直到 7 年前

Dave Ranjan 7 年前

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