vue制作滚动条幅-跑马灯效果实例代码

Posted mishell

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue制作滚动条幅-跑马灯效果实例代码相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" :value="startBtn" @click="startRoll" />
            <input type="button" :value="endBtn" @click="endRoll" />
            <p>{{content}}</p>
        </div>
    </body>
    <script type="text/javascript">
        var test = function(){
            alert("hello")
        }
        var vm = new Vue({
            el:‘#app‘,
            data:{
                startBtn:‘开始滚动‘,
                endBtn:‘停止滚动‘,
                content:‘中国加油，武汉人民加油，我们一定可以战胜疫情的！‘,
                intervalId:null
            },
            methods:{
                startRoll(){
                    if(this.intervalId != null){return}
                    this.intervalId = setInterval(function(){
                        console.log(vm)
                        var first = vm.content.substring(0,1)
                        var end = vm.content.substring(1,vm.content.length)
                        vm.content = end + first
                        console.log(vm.content)
                    },500)
                },
                endRoll(){
                    clearInterval(this.intervalId)
                    this.intervalId = null
                }
            }
        })
    </script>
</html>

 效果：

技术图片

以上是关于vue制作滚动条幅-跑马灯效果实例代码的主要内容，如果未能解决你的问题，请参考以下文章

单页面全屏滚动效果使用element 跑马灯组件实例

网页中图片跑马灯上下滚动的效果怎样可以让他跑一下停一下再跑一下,代码怎么写?

vue文字跑马灯效果

vue中实现文字滚动-跑马灯效果-marquee原生标签

JavaScript基础 滚动条幅的效果

jquery跑马灯效果