位置：首页>> 网络编程>> JavaScript>> Vue实现简单跑马灯特效

Vue实现简单跑马灯特效

作者：pink-0614　　发布时间：2024-04-30 10:31:05　

标签：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>

效果：

来源：https://blog.csdn.net/pink_cz/article/details/121053483

投稿

Vue实现简单跑马灯特效

效果：

知识点：

代码展示：

猜你喜欢