Vue实现简单跑马灯特效

 更新时间:2022年05月18日 16:14:03   作者:pink-0614  
这篇文章主要为大家详细介绍了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>&nbsp;&nbsp;&nbsp;
            <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>

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Nuxt的动态路由和参数校验操作

    Nuxt的动态路由和参数校验操作

    这篇文章主要介绍了Nuxt的动态路由和参数校验操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue-cli 引入、配置axios的方法

    vue-cli 引入、配置axios的方法

    这篇文章主要介绍了vue-cli 引入axios的方法,文中还给大家提到了vue-cli 配置axios的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Vue3 中的 Vue-Router 和 VueX详解

    Vue3 中的 Vue-Router 和 VueX详解

    VueX 提供了一个全局都可以使用的数据管理仓库,不用考虑父子传值之类的问题,并且可以跨页面传递数据,提高了可维护性,这篇文章主要介绍了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以参考下
    2022-12-12
  • vue 集成 vis-network 实现网络拓扑图的方法

    vue 集成 vis-network 实现网络拓扑图的方法

    这篇文章主要介绍了vue 集成 vis-network 实现网络拓扑图的方法,本文通过实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
    2019-08-08
  • vue和react的区别及优缺点解读

    vue和react的区别及优缺点解读

    这篇文章主要介绍了vue和react的区别及优缺点说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue将时间戳转换成自定义时间格式的方法

    vue将时间戳转换成自定义时间格式的方法

    下面小编就为大家分享一篇vue将时间戳转换成自定义时间格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    本篇文章主要介绍了详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue 实现分页功能

    Vue 实现分页功能

    Vue提供了丰富的API和组件,可以帮助开发者快速地构建现代化的Web应用程序,本文介绍了Vue如何实现分页功能,包括数据的获取、分页器的实现和页面的渲染
    2023-09-09
  • 如何使用 vue-cli 创建模板项目

    如何使用 vue-cli 创建模板项目

    这篇文章主要介绍了如何使用 vue-cli 创建模板项目,帮助大家更好的理解和学习vue框架的知识,感兴趣的朋友可以了解下
    2020-11-11
  • Vue3使用MD5加密实战案例(清晰明了)

    Vue3使用MD5加密实战案例(清晰明了)

    MD5是一种信息摘要算法(对称加密),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值,用来确保信息传输完整一致性,这篇文章主要给大家介绍了关于Vue3使用MD5加密的相关资料,需要的朋友可以参考下
    2023-05-05

最新评论