Home > Article > Web Front-end > Javascript implements text jumping effects

Javascript implements text jumping effects

高洛峰Original: 2016-12-05 09:55:171517browse

1. How to turn the string into fonts one by one, let us control

1 Get the content of the string

2 Clear the content of the string

3 Traverse the string, and then cut it out one by one.

4 Add positioning to the cut text

5 Reassign the added positioned text to the obtained element.

2. How to realize the text jumping after the mouse slides up

1 Define a variable 0

2 Define a timer

3 Let the variable continue to decrease

4 Change the top of the element == variable

5 When the variable reaches a certain height, let the variable continue to increase

6 When the variable is reduced to 0 (their own position),

7 Clear the animation to change the element's top = 0 (their own position)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>
   文字跳动特效-vico
  </title>
  <style type="text/css">
   #txtDom{ padding: 50px; width:500px; margin: 0 auto; font-size: 16px;
   font-family: "微软雅黑"; line-height: 1.3em; text-indent: 2em;}
  </style>
 </head>
 <body>
  <div id="txtDom">
   要是没有错误和失败，你就不会学到东西；要是没有痛苦，你就不会长大。
   一旦你明白了这些，你就知道了一切事情都是为了某种目的而发生。 
   所以不要紧张或者认为生活不公平，因为一切事情都有原因，只有时间能诉说教会了我们什么。
  </div>
  <script type="text/javascript">
   var txtAnim = {
    len: 0,
    txtDom: "",
    arrTxt: [],
    init: function(obj) {
     this.obj = obj;
     this.txtDom = obj.innerHTML.replace(/\s+/g, "");
     this.len = this.txtDom.length;
     obj.innerHTML = "";
     this.addDom();
    },
    addDom: function() {
     for (var i = 0; i < this.len; i++) {
      var spanDom = document.createElement("span");
      spanDom.innerHTML = this.txtDom.substring(i, i + 1);
      this.obj.appendChild(spanDom);
      this.arrTxt.push(spanDom);
     };
     for (var j = 0; j < this.len; j++) {
      this.arrTxt[j].style.position = "relative";
     };
     this.strat();
    },
    strat: function() {
     for (var i = 0; i < this.len; i++) {
      this.arrTxt[i].onmouseover = function() {
       this.stop = 0;
       this.speed = -1;
       var $this = this;
       this.timer = setInterval(function() {
        $this.stop += $this.speed; //0 += -1
        if ($this.stop <= -20) {
         $this.speed = 1;
        }
        $this.style.top = $this.stop + "px";
        if ($this.stop >= 0) {
         clearInterval($this.timer)
         $this.style.top = 0 + "px";
        };
       },
       15);
      };
     }
    }
   }
   var txtDom = document.getElementById("txtDom");
   txtAnim.init(txtDom);
  </script>
 </body>
</html>

The above is The editor introduces to you Javascrip to implement text jumping effects. I hope it will be helpful to everyone

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js realizes that the scroll bar position remains unchanged when the page is refreshedNext article：js realizes that the scroll bar position remains unchanged when the page is refreshed

See more

Javascript implements text jumping effects

Related articles