vue 实现简单跑马灯效果

1.需求：实现跑马灯效果方向从右向左

2.分析：

1.需要文字跑到结束再重新开始，需要开启定时器

2.从右向左移动，需要用到css 的 transform，设置transLateX,

3.何时重新跑的条件设置需要占位多宽 offsetWidth 属性

4.一行和多行需要区别判断

3.实现

 1.css部分：

<div class="ul_box" @click="checkWidth()">

      <ul class="ul_id">

        <li class="li_id">

          <span class="content_id">

            {{message.Content}}

            啊啊啊啊，

          </span>

        </li>

      </ul>

    </div>

2.js部分

checkWidth(){

        let spanEle = document.querySelector('.content_id');

        let offsetWidth = spanEle.offsetWidth;

        let liEle = document.querySelector('.li_id');

        let initOffset = liEle.offsetWidth-10;

        liEle.style.transform = 'translateX(' + initOffset + 'px)';

        console.log(offsetWidth);

        let index = 0;

        let timer = setInterval(function() {

          index++;

          var translatex = initOffset - index * 5;

          if (offsetWidth < initOffset) {

            if (translatex  <= 0) {

              translatex = initOffset;

              index  = 0;

            }

          }

          if (index > offsetWidth/5 && offsetWidth > initOffset) {

            translatex = initOffset;

            index = 0;

          }

        liEle.style.transform = 'translateX(' + translatex + 'px)';

        }, 150);

      },