跑马灯的两种实现方式

方式一:利用元素尺寸变化监听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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经典获奖案例 | 度小满互联网金融开源软件治理解决方案

近日&#xff0c;广东省粤港澳合作促进会金融专业委员会和粤港澳大湾区金融创新研究院在广州联合举办“2024年粤港澳大湾区数智金融峰会暨第二届金融创新优秀应用案例与解决方案技术成果授牌仪式”。《度小满互联网金融开源软件治理解决方案》从数百个申报项目中脱颖而出&#…

C语言多线程编程:并发控制与同步机制

1. 引言 在多核处理器日益普及的今天&#xff0c;多线程编程已经成为提高程序性能的重要手段。C语言作为一种高效、底层的编程语言&#xff0c;自然也支持多线程编程。本文将带你深入了解C语言多线程编程的奥秘&#xff0c;并分享一些实用的编程技巧。 2. 线程基础 2.1 线程的…

Java线程池:深入理解与高效应用

引言 在现代软件开发中&#xff0c;多线程编程已成为提高应用性能的关键技术之一。Java线程池作为管理线程的一种高效机制&#xff0c;允许我们复用线程&#xff0c;减少线程创建和销毁的开销&#xff0c;并且可以有效地控制并发线程的数量&#xff0c;避免资源耗尽。本专栏旨…

解决VIvado编程中遇到的bug 5

解决VIvado编程中遇到的bug 5 语言 &#xff1a;Verilg HDL EDA工具&#xff1a; Vivado、quartus2 、modelsim 解决VIvado编程中遇到的bug 5一、引言二、问题、分析及解决方法1. vivado编译时报错&#xff08;1&#xff09;错误&#xff08;2&#xff09;分析&#xff08;3&am…

YOLOv8 多种任务网络结构详细解析 | 目标检测、实例分割、人体关键点检测、图像分类

前言 本文仅根据模型的预测过程&#xff0c;即从输入图像到输出结果&#xff08;图像预处理、模型推理、后处理&#xff09;&#xff0c;来展现不同任务下的网络结构&#xff0c;OBB 任务暂不包含。 Backbone 1. yolov8m 2. yolov8m-p2 3. yolov8m-p6 4. 细节 图中 CBS Con…

DALL·E 2详解:人工智能如何将您的想象力变为现实!

引言 DALLE 2是一个基于人工智能的图像生成模型&#xff0c;它通过理解自然语言描述来生成匹配这些描述的图像。这一模型的核心在于其创新的两阶段工作流程&#xff0c;首先是将文本描述转换为图像表示&#xff0c;然后是基于这个表示生成具体的图像。 下面详细介绍DALL-E2的功…

Java高级---Spring Boot---3快速入门

3 Spring Boot快速入门 3.1 创建第一个Spring Boot项目 使用IntelliJ IDEA和Spring Initializr创建项目 打开IntelliJ IDEA 并选择 “Start a new project”。在新建项目向导中&#xff0c;选择 “Spring Initializr”。填写项目基本信息&#xff1a; Group: 定义项目组&…

C#使用GDI对一个矩形进行任意角度旋转

C#对一个矩形进行旋转GDI绘图&#xff0c;可以指定任意角度进行旋转 我们可以认为一张图片Image&#xff0c;本质就是一个矩形Rectangle,旋转矩形也就是旋转图片 在画图密封类 System.Drawing.Graphics中&#xff0c; 矩形旋转的两个关键方法 //设置旋转的中心点 public v…

如何设计创新型薪酬福利体系?

薪酬福利体系是企业吸引和留住人才的重要工具&#xff0c;然而&#xff0c;传统的薪酬福利体系缺少一定的灵活性&#xff0c;同时在满足员工多样性需求方面也比较欠缺。所以越来越多的企业选择建立创新型的薪酬福利体系。那么应该如何建立兼具灵活和激励的创新型的薪酬福利体系…

sns报错 UserWarning: Dataset has 0 variance; skipping density estimate.

报错信息 UserWarning: Dataset has 0 variance; skipping density estimate. Pass warn_singularFalse to disable this warning. 三维数组维度(1000, 27,1)&#xff0c;取出第一个元素画出分布图保存检查错误原因&#xff0c;print(Mcases[:,:,0].shape) 显示维度(1000, 27)修…

生成随机图片

package com.zhuguohui.app.lib.tools;/*** Created by zhuguohui* Date: 2024/6/1* Time: 13:39* Desc:获取随机图片*/ public class RandomImage {// static final String url "https://picsum.photos/%d/%d?random%d";static final String url "https://…

FPGA定点数FFT过后转换为浮点数与Matlab计算的FFT结果进行比对

目录 1.前言2.FPGA的testbench中如何读取数据文件3.FPGA的testbench中如何将输出数据存储在文件中4.Matlab去读取testbench存储的文件数据4.1纯数字不带编码4.2 带编码的数据&#xff0c;如定点数 微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 前面一篇文章讲了&…

ESP32-C3模组上实现蓝牙BLE配网功能(2)

接前一篇文章&#xff1a;ESP32-C3模组上实现蓝牙BLE配网功能&#xff08;1&#xff09; 本文内容参考&#xff1a; 《ESP32-C3 物联网工程开发实战》 乐鑫科技 蓝牙的名字由来是怎样的&#xff1f;为什么不叫它“白牙”&#xff1f; 特此致谢&#xff01; 一、蓝牙知识基础…

[数据集][目标检测]吉他检测数据集VOC+YOLO格式66张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;66 标注数量(xml文件个数)&#xff1a;66 标注数量(txt文件个数)&#xff1a;66 标注类别数…

Three.js——tween动画、光线投射拾取、加载.obj/.mtl外部文件、使用相机控制器

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…

数据结构基础篇(6)

二十三、队列的表示和操作的实现 相关术语 队列是仅在表尾进行插入操作&#xff0c;在表头进行删除操作的线性表表尾既a~n段&#xff0c;称对尾&#xff1b;表头a~1段&#xff0c;称队头它是一种先进先出&#xff08;FIFO&#xff09;的线性表 入队&#xff1a;插入元素出队&a…

YOLOv8 segment介绍

1.YOLOv8图像分割支持的数据格式&#xff1a; (1).用于训练YOLOv8分割模型的数据集标签格式如下: 1).每幅图像对应一个文本文件&#xff1a;数据集中的每幅图像都有一个与图像文件同名的对应文本文件&#xff0c;扩展名为".txt"; 2).文本文件中每个目标(object)占一行…

iReport的下载与安装

下载官网&#xff1a;Home - Jaspersoft Community 网盘下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Oy5opY4GxPZ_mllTlBZ-2w 提取码&#xff1a;75do 安装就是双击后一直点击下一步 安装好了之后要配置jdk环境 iReport 目前 并不支持 高版本jdk 只支持…

TQSDRPI开发板教程:UDP收发测试

项目资源分享 链接&#xff1a;https://pan.baidu.com/s/1gWNSA9czrGwUYJXdeuOwgQ 提取码&#xff1a;tfo0 LWIP自环教程&#xff1a;https://blog.csdn.net/mcupro/article/details/139350727?spm1001.2014.3001.5501 在lwip自环的基础上修改代码实现UDP的收发测试。新建一…

嫁接打印:经济与实用的完美结合

在制造领域&#xff0c;寻求经济且好用的技术方案至关重要。而在模具制造中&#xff0c;3D 打印随形水路在提升冷却效率和产品良率方面的卓越表现已得到广泛认同。如何更经济的应用3D打印技术&#xff0c;就不得不说嫁接打印了。 在嫁接打印的制造过程中&#xff0c;产品的一部…