Question

我试着去理解这是怎么做的。我只知道它使用jquery

http://www.marieforleo.com/

查看左上角的徽标/文字...当鼠标悬停时，它会显示带有转换的随机文本，并在鼠标移出时默认返回站点名称。

这是怎么做到的？

非常感谢。

Answer 1

I hope this helps you! It's not exactly the same, but still... You can still improve some functionality and you can work on code re-usability.

(function($) {

  var logo = $("#logo"),
    originalText = logo.html(),
    altLogoTextArray = ["make it count.", "make peace.", "make art not war.", "make something out of yourself."],
    chosenText,
    timeOut = null;

  function animateText(text, startFrom, length, delay) {
    var strlen = text.length;
    if (startFrom + length > strlen) {
      return;
    }
    timeOut = window.setTimeout(function() {
      logo.html(text.substr(0, startFrom) + text.substr(startFrom, length));
      //testText.html(startFrom + length);
      animateText(text, startFrom, length + 1, delay);
    }, delay);
  }

  function getRandomTextFromArray(arr) {
    var arrLength = arr.length,
      randInt = Math.floor(Math.random() * (arrLength - 0)) + 0;
    return arr[randInt];
  }

  logo.on('mouseenter mouseleave', function(e) {
    window.clearTimeout(timeOut);
    if (e.type == "mouseenter") {
      chosenText = getRandomTextFromArray(altLogoTextArray);
      animateText(chosenText, 3, 0, 20);
    } else if (e.type == "mouseleave") {
      animateText(originalText, 3, 0, 20);
    }
  });

})(window.jQuery);

#logo {
  font-size: 30px;
  min-width: 500px;
  display: inline-block;
  zoom: 1;
  cursor: pointer;
}

#logo:after {
  content:"";
  display:block;
  height:1px;
  width:22px;
  background:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="logo">marie forleo.</span>

如何通过转换更改鼠标上的文本

1 个答案: