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

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

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); }
  }
}

你可能感兴趣的:(技术博客)