vue框架下实现文字走马灯

Posted 2022-09-08 chelse

html部分： 

      <div class="lantern-text" ref="lanternTextBox">
        <p class="text text-front" ref="lanternTextFornt"></p>
        <p class="text text-behind" ref="lanternTextBehind"></p>
      </div>

style部分：

　　.lantern-text 
        overflow: hidden;
        width: 80%;
        color: #5b6f8f;
        margin-left: 40px;
        position: relative;
        height: 100%;
         

      .text 
        white-space: nowrap;
        position: absolute; 
        width: auto;
      

      .text-front 
        animation: textFront linear;
      

      .text-behind 
        animation: textBehind linear infinite; 
        transform: translate(300px);
      

JS部分：

　　　 const  lanternTextFornt, lanternTextBehind, lanternTextBox  = this.$refs;
      const data = text:‘请求的跑马灯内容.....‘;
      if(data && data.text) 
        lanternTextFornt.innerHTML = data.text;
        lanternTextBehind.innerHTML = data.text;
        const lanternBoxWidth = lanternTextBox.offsetWidth;
　　　　　// 计算前一个运动时间
        const timeFornt = Math.round(lanternTextFornt.offsetWidth / 25);
　　　　　// 计算后一个运动时间
        const timeBehind = Math.round((lanternTextFornt.offsetWidth + lanternBoxWidth) / 25);
        lanternTextFornt.style.animationDuration = `$timeFornts`;
        lanternTextBehind.style.animationDuration = `$timeBehinds`;
　　　　　// 后面一个动画延时时间
        lanternTextBehind.style.animationDelay = `$timeFornts`;
　　　　  // 确保恒定速率　
        lanternTextBehind.style.transform = `translate($lanternBoxWidthpx)`;
        lanternTextFornt.addEventListener(‘animationend‘, function() 
          lanternTextFornt.style.display = ‘none‘;
        )