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

Posted 2022-08-04 JackieDYH

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