拍行榜，排名无限滚动，css实现

m0_73819852

已于 2024-07-30 09:24:06 修改

阅读量97

点赞数 2

文章标签： css3 vue javascript

于 2024-06-23 13:58:09 首次发布

本文链接：https://blog.csdn.net/m0_73819852/article/details/139899586

版权

废话不多说，直接上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <style>
        .box div {
            width: 300px;
            padding: 1rem 0;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div id="app">
        <div style="height: 200px;overflow: hidden;">
            <div class="box"
                :style="{ transitionDuration: `${transitionDuration}ms`, transform: `translateY( ${translateX}px)`}">
                <div class="scroll_box" v-for="(item,index) in list" :key="item.name">{{item.name}}</div>
            </div>
            <div class="box" v-if="list.length>4"
                :style=" { transitionDuration: `${transitionDuration}ms`, transform: `translateY( ${translateX}px)`}">
                <div class="scroll_box" v-for="(item,index) in list" :key="item.name">{{item.name}}</div>
            </div>

        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            translateX: 0,
            transitionDuration: 500,
            translateValue: 200,
            switeCount: 4,
            maxRow: 4,
            time: '',
            list: [{
                name: 1,
            }, {
                name: 2,
            }, {
                name: 3,
            }, {
                name: 4,
            }, {
                name: 5,
            },]
        },
        mounted() {
            if (this.list.length > 4) {
                this.scroll()
            }
        },
        methods: {
            scroll() {
                this.translateValue = document.querySelectorAll('.scroll_box')[0].clientHeight
                this.switeCount = document.querySelectorAll('.scroll_box').length / 2
                console.log(this.translateValue, 'this.translateValue');
                console.log(this.switeCount, 'this.switeCount');
                console.log(-this.translateValue * this.switeCount - 4 * this.translateValue, 'this.translateValue * this.switeCount');
                this.time = setInterval(() => {
                    this.translateX -= this.translateValue
                    console.log(this.translateX, 'this.translateX');
                    this.transitionDuration = 500
                    if (this.translateX === (-this.translateValue * this.switeCount)) {
                        setTimeout(() => {
                            this.translateX -= this.translateValue
                            this.transitionDuration = 0
                            this.translateX = 0
                        }, 400)
                        console.log(1111);

                    }
                }, 2000)
            },
        },
        beforeDestroy() {
            clearInterval(this.time)
        },
    })
</script>

</html>