跑马灯的两种实现方式

方式一:利用元素尺寸变化监听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>
相关推荐
TT模板5 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩6 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真11 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
凉豆菌1 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司1 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记