文字跳动特效

最新推荐文章于 2024-01-23 11:30:00 发布

Agrass啊草

最新推荐文章于 2024-01-23 11:30:00 发布

阅读量2.9k

点赞数

文章标签：字体特效 javascript

本文链接：https://blog.csdn.net/unaMattin/article/details/53363385

版权

一.如何让字符串变成一个个的字体，让我们去控制

1获取字符串内容

2清空字符串内容

3遍历字符串，然后一个个的切割出来。

4给切割出来的文字添加定位

5把添加好定位的文字，重新赋值到获取的元素里面。

二.鼠标滑动上去之后，该怎么去实现文字的跳动

1 定义一个变量0

2 定义定时器

3让变量不断的减少

4改变元素的top == 变量

5当变量达到一定高度的时候，让变量不断的增加

6 当变量减少到0（本身位置）的时候，

7清除动画改变元素的top = 0（本身位置）

<!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>

Agrass啊草

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
文字跳动特效

1 如何让字符串变成一个个的字体，让我们去控制1获取字符串内容2清空字符串内容3遍历字符串，然后一个个的切割出来。4给切割出来的文字添加定位5把添加好定位的文字，重新赋值到获取的元素里面。2：鼠标滑动上去之后，该怎么去实现文字的跳动1 定义一个变量02 定义定时器3让变量不断的减少4改变元素的top == 变量5当变量达到一定高度的时候，让变量不断的增加
复制链接

扫一扫