跑马灯的两种实现方式
方式一:利用元素尺寸变化监听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的使用 五、栈的习题 第一题 第二题 第三题 第四题 第五题 第六题 第七题 六、栈、虚拟机栈、栈帧的区别 目录 一、…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
