文字跑马灯

javascript
  目录
  1. 1. 文字跑马灯

文字跑马灯效果

文字跑马灯

笔者在开发移动端，因为移动端的屏幕较小，在展示文字的时候，比如说一个区域有5个文字，效果图展示没有问题，但是实际的数据可能是10个或者更多文字，如果折行就不美观，不折行又显示不下。加上省略号看起来美观些，但是还是看不全文字，所以跑马灯效果是一个很好的解决方案。
代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯效果</title>
</head>
<body>
  <div class="div-wrap" style="width:100px;"></div>
</body>
<script>
  /**
   * @desc 文字跑马灯
   * @param {domNode} [Element] ele 文字外容器dom
   * @param {offSetLeft} [Number] offSetLeft 文字跑动距离左侧容器距离 
   * @param {text} [String] 文字
   */
  function RunChar(ele, offSetLeft, text) {
    this.ele = ele;
    this.text = text;
    this.init = function() {
      let nSpan = document.createElement('span');
      let nText = document.createTextNode(text);
      nSpan.appendChild(nText);
      this.ele.appendChild(nSpan);
      // css
      this.ele.style['white-space'] = 'nowrap';
      this.ele.style['overflow'] = 'hidden';
      nSpan.style['display'] = 'inline-block';
      let wrapWidth = Math.ceil(parseFloat(this.getStyle(this.ele, 'width')));
      let spanWidth = Math.ceil(parseFloat(this.getStyle(nSpan, 'width')));
      if(spanWidth > wrapWidth) {
        let w = spanWidth - wrapWidth;
        let moveVal = 0;
        setInterval(function() {
          nSpan.style.transform = `translateX(${moveVal--}px)`;
          if(moveVal <= -(w+offSetLeft)) moveVal = offSetLeft;
        }, 100);
      }
    }
    this.getStyle = function(element, attr) {
      var computed;
      if(element.currentStyle) {
        computed = element.currentStyle;
      } else {
        computed = window.getComputedStyle(element, false);
      }
      return computed.getPropertyValue( attr ) || computed[ attr ];
    }
    this.init();
  }
  new RunChar(document.querySelector('.div-wrap'), 100, '文字跑马灯效果');
</script>
</html>

  移动端   工具库