码迷,mamicode.com
首页 > 其他好文 > 详细

vue框架下实现文字走马灯

时间:2019-08-29 18:29:37      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:sla   efs   inner   form   一个   ati   内容   linear   ant   

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 = `${timeFornt}s`; lanternTextBehind.style.animationDuration = `${timeBehind}s`;
     // 后面一个动画延时时间 lanternTextBehind.style.animationDelay = `${timeFornt}s`;
     // 确保恒定速率  lanternTextBehind.style.transform = `translate(${lanternBoxWidth}px)`; lanternTextFornt.addEventListener(‘animationend‘, function() { lanternTextFornt.style.display = ‘none‘; }) }

 

vue框架下实现文字走马灯

标签:sla   efs   inner   form   一个   ati   内容   linear   ant   

原文地址:https://www.cnblogs.com/chelse/p/11431031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!