vue中实现文字滚动-跑马灯效果-marquee原生标签

一：marquee标签 实现循环滚动

滚动速度: scrollamount

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

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

<marquee scrollamount="3">
    我在滚动中行走
</marquee>

二：vue方式

<template>
  <div class="sb">
    <input @click="fly" type="button" value="起来" />
    <input @click="stop" type="button" value="稳住" />
    <h4 @click="bt" ref="kk">{{ msg }}</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "发育中发育中发育中......",
      intervarID: null
    };
  },
  mounted() {},
  methods: {
    bt() {
        console.log(this.$refs.kk.innerHTML);
    },
    fly() {
      var that = this;
      if (that.intervarID != null) {
        return;
      } else {
        that.intervarID = setInterval(() => {
          //截取到头到第一个字符串
          var start = that.msg.substring(0, 1);
          //截取到后面所有到字符串
          var end = that.msg.substring(1);
          //重新拼接得到新到字符串，并赋值给msg
          that.msg = end + start;
        }, 400);
      }
    },
    stop() {
      clearInterval(this.intervarID);
      this.intervarID = null;
    }
  }
};
</script>

<style>
</style>

三：css3方式

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

/* 文字滚动 */
.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);
	}
}

四：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>