跑马灯的两种实现方式

方式一:利用元素尺寸变化监听api,计算宽度,得出时间,进行无限次数动画。

优点:能自定义速度(0 - 1)。

复制代码
<template>
    <div class="box">
        <i class="iconfont icon-gonggao"></i>
        <div class="marquee-box">
            <div ref="elRef" class="marquee">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const props = defineProps({
    speed: {
        type: Number,
        default: 0.1
    },
})
const elRef = ref()

onMounted(() => {
    marquee(elRef.value, props.speed)
})

function marquee(el: HTMLElement, speed: number = 0.1) {
    const startMarquee = () => {
        const parentWidth = parseInt(window.getComputedStyle(el?.parentNode).width)
        const allWidth = window.innerWidth + parseInt(window.getComputedStyle(el).width)
        const _speed = speed >= 1 ? 0.99 : speed <= 0 ? 0.01 : speed;
        const time = allWidth * 30000 / 1920 * (1 - _speed);

        el.animate([
            { transform: `translateX(${parentWidth}px)` },
            { transform: `translateX(-100%)`}
        ], {
            duration: time,
            easing: 'linear',
            iterations: Infinity,
        })
    }
    const ro= new ResizeObserver((entries, observer) => {
        startMarquee()
    });
    ro.observe(el);
}
</script>
<style lang="less" scoped>
    .box{
        display: flex;
        align-items: center;
        padding: 1.875rem 0 1.875rem 1rem;
        background-color: #FFF8EE;
        color: #FC7D3C;
        font-size: 18px;
        .marquee-box{
            flex: 1;
            min-width: 0px;
            margin-left: .2rem;
            overflow: hidden;
        }
        .marquee{
            display: inline-block;
            white-space:nowrap;
        }
        .iconfont{
            font-size: 1.875rem;
            line-height: 1;
        }
    }
    .h5{
        .box{
            padding: .5rem 0;
            font-size: 0.875rem;
        }
        .iconfont{
            font-size: 1.2rem;
        }
    }
</style>

方式二:利用原生跑马灯标签,简单。

缺点:不能定义速度。

复制代码
<template>
    <div class="box">
        <i class="iconfont icon-gonggao"></i>
        <marquee bgcolor= "#FFF8EE">
            <slot></slot>
        </marquee>
    </div>
</template>
<style lang="less" scoped>
    .box{
        display: flex;
        align-items: center;
        padding: 1.875rem 0 1.875rem 1rem;
        background-color: #FFF8EE;
        color: #FC7D3C;
        font-size: 18px;
        .iconfont{
            font-size: 1.875rem;
            line-height: 1;
        }
    }
    .h5{
        .box{
            padding: .5rem 0;
            font-size: 0.875rem;
        }
        .iconfont{
            font-size: 1.2rem;
        }
    }
</style>
相关推荐
一枚前端小能手10 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码10 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码10 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗10 小时前
VS Code 中手动和直接运行TS代码
前端
小高00710 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴10 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong10 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
skykun10 小时前
今天你学会JS的类型转换了吗?
javascript
Lotzinfly10 小时前
8 个经过实战检验的 Promise 奇淫技巧你需要掌握😏😏😏
前端·javascript·面试