Vue实现简单跑马灯特效
作者：pink-0614 时间：2024-04-30 10:31:05
本文实例为大家分享了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>
效果：
来源：https://blog.csdn.net/pink_cz/article/details/121053483
标签：vue,跑马灯
0
投稿猜你喜欢
WEB2.0网页制作标准教程（12）XHTML校验及常见错误
2008-02-19 19:59:00
利用Python编写的实用运维脚本分享
2022-07-15 21:32:46
MySQL权限详解
2011-02-16 12:20:00
mysql 控制台程序的提示符 prompt 字符串设置
2024-01-26 01:42:11
前端模板引擎
2010-07-27 12:33:00
python里读写excel等数据文件的6种常用方式(小结)
2021-04-09 08:11:52
FCKeditor ASP.NET 上传附件研究
2023-12-30 05:27:22
Overflow Auto && Position Relative
2009-09-03 12:02:00
一文带你吃透Python中的日期时间模块
2023-01-11 19:33:32
Centos5.x下升级python到python2.7版本教程
2023-04-15 13:50:07
MySQL对JSON类型字段数据进行提取和查询的实现
2024-01-23 02:48:54
Python新手学习装饰器
2022-11-02 03:42:35
浅谈解除装饰器作用(python3新增)
2022-05-30 03:31:52
python实现自动登录
2023-10-20 05:11:46
Golang中Interface接口的三个特性
2024-04-23 09:35:46
MySQL两种临时表的用法详解
2024-01-26 20:37:46
tensorflow 使用flags定义命令行参数的方法
2021-03-20 10:43:23
详解Visual Studio使用Git忽略不想上传到远程仓库的文件
2023-10-13 06:42:21
JavaScript缓动动画函数的封装方法
2023-08-07 10:48:26
pandas去重复行并分类汇总的实现方法
2021-06-12 17:38:37
