跑马灯的两种实现方式
方式一:利用元素尺寸变化监听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>
相关文章:
跑马灯的两种实现方式
方式一:利用元素尺寸变化监听api,计算宽度,得出时间,进行无限次数动画。 优点:能自定义速度(0 - 1)。 <template><div class"box"><i class"iconfont icon-gon…...
OpenAI 的 GPT-4o 是目前最先进的人工智能模型!如何在工作或日常生活中高效利用它?
OpenAI 的 GPT-4o 是目前最先进的人工智能模型!如何在工作或日常生活中高效利用它? 博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大…...
安卓ANR检测、分析、优化面面谈
前言 一个引发讨论的楔子,以下三种现象有什么区别: App停止运行App暂无响应App闪退 答案: 产生原因不同:停止运行是UNCheckExceptionError暂无响应是ANRDialog闪退是CheckExceptionError 本文讨论的主题是ANR的定义、分类、复现…...
“手撕”链表的九道OJ习题
目录 1. 第一题 2. 第二题 3. 第三题 4. 第四题 5. 第五题 6. 第六题 7. 第七题 8. 第八题 9. 第九题 1. 第一题 删除链表中等于给定值 val 的所有节点。OJ链接 思路如下: 相当于链表的removeAll();制定prev和cur,prev记录前一个节点ÿ…...
解决 Git commit 或 Git merge 跑到 VIM 里面去了
像 git commit 分支名字 或 git merge 分支名字这个命令后面最好加上 -m "消息",如果你不加上 -m "消息"的话,它会打开一个程序让你去加上消息,这个程序还是在控制台里面,只不过是 Linux 里面一个叫做 VIM 的…...
营造科技展厅主题氛围,多媒体应用有哪些新策略?
长久以来,展厅作为线下向公众传递信息的窗口,其设计风格与内容主题紧密相连,展现出千姿百态的面貌。然而,随着数字多媒体技术的日新月异,展厅不再仅仅是传统的信息展示平台,而是成为了引领内容展示潮流的风…...
【UML用户指南】-04-从代码到UML的关键抽象
1、关键抽象 声明了一个名为paint的操作,它的实现调用名为drawString的另一个操作,drawString操作负责在指定的位置上打印“Hello,World!”。在通常的面向对象的方式下,drawString是一个名称为g的参数上的一个操作,g的类型是类Gr…...
(2024,LoRA,全量微调,低秩,强正则化,缓解遗忘,多样性)LoRA 学习更少,遗忘更少
LoRA Learns Less and Forgets Less 公和众和号:EDPJ(进 Q 交流群:922230617 或加 VX:CV_EDPJ 进 V 交流群) 目录 0. 摘要 1. 引言 2. 背景 3. 实验设置 3.2 使用编码和数学基准测试来衡量学习(目标域…...
【Java】面向对象的三大特征:封装、继承、多态
封装 什么叫封装? 在我们写代码的时候经常会涉及两种角色: 类的实现者 和 类的调用者。 封装的本质就是让类的调用者不必太多的了解类的实现者是如何实现类的, 只要知道如何使用类就行了,这样就降低了类使用者的学习和使用成本&a…...
请问Java8进阶水平中,常用的设计模式有哪些?
设计模式通常被分为三大类:创建型(Creational)、结构型(Structural)和行为型(Behavioral)。以下是这20个设计模式的分类: 创建型(Creational)设计模式&#…...
力扣--最大子数组和
给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 子数组 是数组中的一个连续部分。 示例 1: 输入:nums [-2,1,-3,4,-1,2,1,-5,4] 输出:…...
C# 中的字符与字符串
简介 在C#编程语言中,字符和字符串是处理文本数据的基础。字符是单个的字母或符号,而字符串是字符的集合。本篇博客将详细介绍C#中的字符类型 char 和字符串类型 string,以及它们的基本操作。 字符类型 char char 类型在C#中用于表示单个字…...
TPM之VMK密封
本篇文章主要介绍基于TPM的Bitlocker全盘加密时,VMK密钥的密封(Seal)流程,至于TPM、Bitlocker、密钥保护器、VMK密钥等这些东西是什么,这里不做解释,需要自己脑补一下(╮(╯▽╰)╭)…...
Fastjson 反序列化漏洞[1.2.24-rce]
漏洞复现环境搭建请参考 http://t.csdnimg.cn/vSaaw kali切换jdk版本请参考 Kali安装JAVA8和切换JDK版本的详细过程_kali安装jdk8-CSDN博客 漏洞原理 Fastjson提供的com.sun.rowset.JdbcRowSetImpl类下的dataSourceName方法支持传入一个RMI/LDAP源,支持远程调用。…...
【面试宝藏】Go基础面试题其一
探索Go语言:特性、用法与最佳实践 Go语言(Golang)自发布以来迅速成为开发者社区中的热门选择。本文将探讨Go语言的优势、数据类型、包管理、类型转换、并发处理、同步机制、通道特性及其使用中的注意事项等内容,并回答一些常见的…...
python如何安装pyqt4
第一步,下载.whl文件,地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4,这里可以下载不同的python版本对应的包。 第二步,选择一个目录,将下载好的文件放到该目录下,然后cmd下ÿ…...
调用上传文件接口出现格式错误
一、造成这种错误的可能有很多 1.检查一下传递格式 2.检查一下接口要求的格式 二、举个例子 这两个有什么区别? 那就是json、和form-data,一定要看仔细接口 如果还是按照json的方式去传就会报错 三、更改header里Content-Type的类型 json等的heade…...
leetcode148. 排序链表,归并法,分治的集大成之作
leetcode148. 排序链表 题目链接 给你链表的头结点 head ,请将其按升序排列并返回排序后的链表。 示例 1: 输入:head [4,2,1,3] 输出:[1,2,3,4] 输入:head [-1,5,3,4,0] 输出:[-1,0,3,4,5] 示例 3&…...
一维时间序列信号的小波模极大值分解与重建(matlab R2018A)
数学上称无限次可导函数是光滑的或没有奇异性,若函数在某处有间断或某阶导数不连续,则称函数在此处有奇异性,该点就是奇异点。奇异性反映了信号的不规则程度,因为信号的奇异点和突变部分往往携带者重要信息,因此信号的…...
五分钟“手撕”栈
实现代码放开头,供大家学习与查阅 目录 一、实现代码 二、什么是栈 三、栈的常见操作 底层实现是链表。 入栈 出栈 四、Stack的使用 五、栈的习题 第一题 第二题 第三题 第四题 第五题 第六题 第七题 六、栈、虚拟机栈、栈帧的区别 目录 一、…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分: 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
