vue跑马灯效果

最新推荐文章于 2024-05-07 01:03:47 发布

LPLIFE

最新推荐文章于 2024-05-07 01:03:47 发布

阅读量310

点赞数

分类专栏： vue css

本文链接：https://blog.csdn.net/LPLIFE/article/details/85241634

版权

vue 同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

css

28 篇文章 0 订阅

订阅专栏

如下图片，会自行向上“滚动”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯 </title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <style>
        div, ul, li, img {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            display: flex;
        }

        .horseLamp {
            width: 100%;
            height: 50px;
            align-items: center;
            background-color: #ddd;
            display: flex;
            box-sizing: border-box;
        }
        .horseLamp_box {
            display: block;
            position: relative;
            width: 60%;
            height: 30px;
            overflow: hidden;
        }

        .horseLamp_list {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }

        .horseLamp_top {
            transition: all 0.2s;
            margin-top: -30px
        }

        .horseLamp_list li {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }

    </style>

</head>
<body>

<div class="vueBox">
    <div class="horseLamp">
        <div class="horseLamp_box">
            <ul class="horseLamp_list" :class="{horseLamp_top:animate}">
                <li v-for="(item, index) in horseLampList">
                  <img :src="item.img">
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    const vm = new Vue ({
        el: ".vueBox",
        data: {
            animate: false,
            horseLampList: [
                {
                    img:'../assets/logo.png'
                },
                {
                    img:'../assets/logo.png'
                },
                {
                    img:'../assets/logo.png'
                },
                {
                    img:'../assets/logo.png'
                }
            ]
        },
        created: function () {
            setInterval (this.showhorseLamp, 600)
        },
        methods: {
            showhorseLamp: function () {
                this.animate = true;
                setTimeout (() => {
                    this.horseLampList.push (this.horseLampList[ 0 ]);
                    this.horseLampList.shift ();
                    this.animate = false;
                }, 2000);
            }
        }
    });
</script>


</body>
</html>

LPLIFE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue跑马灯效果

如下图片，会自行向上“滚动” &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;跑马灯 &lt;/title&gt; &lt;script src="https://cdn
复制链接

扫一扫