vue 实现简单跑马灯效果

Posted 2023-03-03

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

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

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

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

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

      ,