Vue实现简单跑马灯特效
本文实例为大家分享了Vue实现简单跑马灯特效的具体代码,供大家参考,具体内容如下
效果:
点击按钮让文字动起来,点击停止按钮让文字停止
知识点:
- substring(字符串截取)
- setInterval定时器(控制文字移动速度)
- clearInterval清除定时器(控制文字停止)
代码展示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #app{ width: 200px; height: 120px; background-color: pink; text-align: center; border-bottom: 1px solid #cfccc5; } </style> </head> <body> <div id="app"> <h1>{{text}}</h1><br> <button @click="piao()">飘</button> <button @click="ding()">定住</button> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ text:"跑马灯效果!", flag:null }, methods:{ piao(){ // 如果ind已经被赋值了就返回 if(this.flag){return}; this.flag = setInterval(()=>{ // 截取首个字符 var head = this.text.substring(0,1); // 截取除了首个字符外的所有字符 var foot = this.text.substring(1); // 拼接起来 this.text = foot + head; },100) }, ding(){ // 清除定时器 clearInterval(this.flag); // 把flag置空 不然下一次点击文字不会移动 this.flag=null; } } }) </script> </body> </html>
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)