vue.js动态文字滚动公告代码 --- 跑马灯

小鱼儿 2022-05-17 13:20 949阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js动态文字滚动公告代码 </title>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
        <style>
            div, ul, li, span, img {
                margin: 0;
                padding: 0;
                display: flex;
                box-sizing: border-box;
            }
    
            .marquee {
                width: 100%;
                height: 50px;
                align-items: center;
                color: #3A3A3A;
                background-color: #b3effe;
                display: flex;
                box-sizing: border-box;
            }
    
            .marquee_title {
                padding: 0 20px;
                height: 30px;
                font-size: 14px;
                border-right: 1px solid #d8d8d8;
                align-items: center;
            }
    
            .marquee_box {
                display: block;
                position: relative;
                width: 60%;
                height: 30px;
                overflow: hidden;
            }
    
            .marquee_list {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
            }
    
            .marquee_top {
                transition: all 0.5s;
                margin-top: -30px
            }
    
            .marquee_list li {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                padding-left: 20px;
            }
    
            .marquee_list li span {
                padding: 0 2px;
            }
    
            .red {
                color: #FF0101;
            }
    
        </style>
    
    </head>
    <body>
    
    <div class="vueBox">
        <div class="marquee">
            <div class="marquee_title">
                <span>最新战报</span>
            </div>
            <div class="marquee_box">
                <ul class="marquee_list" :class="{marquee_top:animate}">
                    <li v-for="(item, index) in marqueeList">
                        <span>{
       {item.name}}</span>
                        <span>在</span>
                        <span class="red"> {
       {item.city}}</span>
                        <span>杀敌</span>
                        <span class="red"> {
       {item.amount}}</span>
                        <span>万</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
        const vm = new Vue ({
            el: ".vueBox",
            data: {
                animate: false,
                marqueeList: [
                    {
                        name: '1军',
                        city: '北京',
                        amount: '10'
                    },
                    {
                        name: '2军',
                        city: '上海',
                        amount: '20'
                    },
                    {
                        name: '3军',
                        city: '广州',
                        amount: '30'
                    },
                    {
                        name: '4军',
                        city: '重庆',
                        amount: '40'
                    }
                ]
            },
            created: function () {
                setInterval (this.showMarquee, 2000)
            },
            methods: {
                showMarquee: function () {
                    this.animate = true;
    
                    setTimeout (() => {
                        this.marqueeList.push (this.marqueeList[ 0 ]);
                        this.marqueeList.shift ();
                        this.animate = false;
                    }, 500);
    
                }
            }
        });
    </script>
    
    
    </body>
    </html>

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220517/c7c8bb9b75b14a4ea8ab8ddf06d08b9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220517/cabe857ef15d46059f2398700111b97a.png