vue文字跑马灯效果

更新时间:2019-08-05 09:46:00点击次数:569次
效果:
当鼠标移入跑马灯文字时,跑马灯文字暂停滚动,反之鼠标移出继续滚动。

知识点:

substring(字符串截取)
setInterval定时器(解决字符串持续截取与头尾拼接)
clearInterval清除定时器(解决悬停暂停)
ES6箭头函数(解决this指向)
代码实现
HTML:
<div id="app">
<span @mouseout="start" @mouseover="stop">{{ text }}</span>
</div>

Vue:
var vm = new Vue({
el:'#app',
data:{
      text:"跑马灯效果展示~",
      ID:null,
    },
    
    methods:{
    // 开始滚动
start(){
          this.ID = setInterval(() => {
          // 截取首个字符
            var head = this.text.substring(0,1);
            // 截取除首个字符外的所有字符
            var foot = this.text.substring(1);
            // 拼接后重新渲染text属性值
            this.text = foot + head;
          },100)
          
         // 停止滚动
stop(){
// 清除定时器
          clearInterval(this.ID);
        }
    },
})

当鼠标从span标签离开时触发start方法,每次截取后头尾拼接实时渲染。

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息