Question

我想在我的H1标签中替换一个字符串，也就是说我想写“嗨，我是Udim Manny，'我设计着陆页'/'我建立网站'/这样第二个引用取代了第一个实时引用。例如，如果您不理解，请查看http://www.mattfarley.ca

Answer 1

看来你正在寻找一种打字机风格的效果，这可以通过jquery轻松实现。此页面详细说明了如何构建一个：https://css-tricks.com/snippets/css/typewriter-effect/

我已经使用了该教程并借用了一个片段来创建下面的脚本，这是一个基本的例子。就像你要求的那样，引号被输入，然后被删除，下一个被输入。

<!DOCTYPE html>
<html>
   <head>
      <title>Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
         var TxtType = 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;
            };

            TxtType.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 = 200 - 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('typewrite');
                for (var i=0; i<elements.length; i++) {
                    var toRotate = elements[i].getAttribute('data-type');
                    var period = elements[i].getAttribute('data-period');
                    if (toRotate) {
                      new TxtType(elements[i], JSON.parse(toRotate), period);
                    }
                }

            };   
      </script>
   </head>
   <body>
      <h1> 
         Hi, I am Udim Manny,  
         <span class="typewrite" data-period="2000" data-type='[ "I design landing pages.", "I build websites." ]'>
         <span class="wrap"></span>
         </span>
      </h1>
   </body>
</html>

替换H1字符串

1 个答案: