zoukankan      html  css  js  c++  java
  • vue 滚动公告

    html: 

      

    <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>
    
    .marquee {
                 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;
                 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;
            }
            ul, li {
                margin: 0;
                padding: 0;
                display: flex;
                box-sizing: border-box;
            }

    js:

    data: marqueeList: [{
                        name: '最新',
                        city: '消息',
                        amount: '40'
                    }],
    
    
    created: setInterval(function(){
                    _this.showMarquee({
                        name: '4军',
                        city: '重庆',
                        amount: '40'
                    })
                }, 2000)
    
    methods: showMarquee: function (item) {
                    var _this = this;
                    _this.marqueeList.push (item);
                    setTimeout (() => {
                        _this.animate = true;
                        setTimeout(function(){
                            _this.marqueeList.shift ();
                            _this.animate = false;
                        },500)
                    }, 500);
                },
  • 相关阅读:
    汪博士解读PMP考试
    ASP.NET编程实战宝典(光盘内容另行下载,地址见书封底)
    [模板]tarjan算法求SCC
    [POJ 3071]Football[概率DP]
    [数学]根式有理化[高中数学技巧]
    [平面几何]角格点问题
    [数学]对数均值不等式
    [模板][快速排序&归并排序]
    [POJ]P3126 Prime Path[BFS]
    每日一题_191219
  • 原文地址:https://www.cnblogs.com/Mvloveyouforever/p/12710634.html
Copyright © 2011-2022 走看看