Question

我正试图尝试在笔码上找到的这支笔。它允许文本看起来像被键入和删除。

我试图把它放在网站上，html和java就在，我也把css放进去了，但它似乎没有任何想法？

我在Wordpress中使用一个名为Uncode的主题。我能够放入原始的Java和html块，但不能放入CSS，我可以将css放入主题选项或页面。

此页面正在进行中，但此处是指向页面内容的链接：http://preview.geomedia.co.uk/whitelight-venues/about-us/

Answer 1

将css和javascript添加到文件末尾的footer.php中另外，你需要调用jquery-mini.js

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
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);
};
</script>
<style>

h1,h2 {
  font-weight: 200;
  margin: 0.4em 0;
}
h1 { font-size: 3.5em; }
h2 {
  color: #888;
  font-size: 2em;
}

</style>

之后为您的关于我们页面创建一个模板，它应该与其他页面不同，并且将仅使用此页面。

现在，在此模板代码中，您可以将HTML粘贴到要显示文本的位置。

最后，结果将如下所示：https://prnt.sc/hb69cf

它在我的localshot网站上为我工作。

由于

文字在Uncode主题

1 个答案: