跑马灯的两种实现方式

方式一:利用元素尺寸变化监听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>
相关推荐
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui