跑马灯文字的三种实现方式

跑马灯文字的三种实现方式

html实现

• 使用 marquee 标签，配合它的一些属性，可以实现功能强大的跑马灯文字，

<marquee> 跑马灯 html实现 </marquee>

• 但是，这个 marquee 标签，并没有被W3C标准录入，也就是在未来的某个时候，它可能会被弃用，请慎用

  为什么这么好的东东，不被认同呢？
  在W3C标准中,规定功能性分离。分成为结构、样式、行为三个部分，这三个部分分别包括了，结构（xHTML、XML），样工（CSS），行为（DOM、ECMAScript）。
  marquee 已经不只是结构html了，它可以实现js， css的功能。

js实现

• 一般不推荐使用js实现

这里贴出js的一种写法

<script>
    function () {
        var box = document.getElementById("box");
        var wrap = document.getElementById("wrap");
        var conBegin = document.getElementById("conBegin");
        var conBegin_width = getCss(conBegin,"width");

        var timer = window.setInterval(move,10);

        function move() {
            wrap.scrollLeft++;
            var curLeft = wrap.scrollLeft;
            if (curLeft>=conBegin_width) {
                wrap.scrollLeft = 0;
            }
        }

        box.onmouseover = function () {
            window.clearInterval(timer);
        };

        box.onmouseout = function () {
            timer = window.setInterval(move,10);
        };
    }();


    function getCss(curEle, attr) {
        var val = null,reg = null;

        if ("getComputedStyle" in window) {
            val = window.getComputedStyle(curEle,null)[attr];
        } else {
            if (attr === "opacity") {
                val = curEle.currentStyle["filter"];
                reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                val = reg.test(val) ? reg.exec(val)[1]/100 : 1;
            } else {
                val = curEle.currentStyle[attr];
            }
        }
        reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
        return reg.test(val) ? parseFloat(val) : val;
    }

</script>

css实现

• 使用css3非常简单

  <div class="merquee">
    <span class="merquee-txt">跑马灯 css实现</span>
  </div>

• css

.merquee{
  height: 25px;
  line-height: 25px;
  box-sizing: border-box;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  .merquee-txt{
    display: inline-block;
    padding-left: 100%;  /* 从右至左开始滚动 */
    animation: marqueeTransform 16s linear infinite;
  }
  @keyframes marqueeTransform {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
  }
}