当前位置: 首页 > news >正文

跑马灯的两种实现方式

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

相关文章:

跑马灯的两种实现方式

方式一&#xff1a;利用元素尺寸变化监听api&#xff0c;计算宽度&#xff0c;得出时间&#xff0c;进行无限次数动画。 优点&#xff1a;能自定义速度&#xff08;0 - 1&#xff09;。 <template><div class"box"><i class"iconfont icon-gon…...

OpenAI 的 GPT-4o 是目前最先进的人工智能模型!如何在工作或日常生活中高效利用它?

OpenAI 的 GPT-4o 是目前最先进的人工智能模型&#xff01;如何在工作或日常生活中高效利用它&#xff1f; 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大…...

安卓ANR检测、分析、优化面面谈

前言 一个引发讨论的楔子&#xff0c;以下三种现象有什么区别&#xff1a; App停止运行App暂无响应App闪退 答案&#xff1a; 产生原因不同&#xff1a;停止运行是UNCheckExceptionError暂无响应是ANRDialog闪退是CheckExceptionError 本文讨论的主题是ANR的定义、分类、复现…...

“手撕”链表的九道OJ习题

目录 1. 第一题 2. 第二题 3. 第三题 4. 第四题 5. 第五题 6. 第六题 7. 第七题 8. 第八题 9. 第九题 1. 第一题 删除链表中等于给定值 val 的所有节点。OJ链接 思路如下&#xff1a; 相当于链表的removeAll();制定prev和cur&#xff0c;prev记录前一个节点&#xff…...

解决 Git commit 或 Git merge 跑到 VIM 里面去了

像 git commit 分支名字 或 git merge 分支名字这个命令后面最好加上 -m "消息"&#xff0c;如果你不加上 -m "消息"的话&#xff0c;它会打开一个程序让你去加上消息&#xff0c;这个程序还是在控制台里面&#xff0c;只不过是 Linux 里面一个叫做 VIM 的…...

营造科技展厅主题氛围,多媒体应用有哪些新策略?

长久以来&#xff0c;展厅作为线下向公众传递信息的窗口&#xff0c;其设计风格与内容主题紧密相连&#xff0c;展现出千姿百态的面貌。然而&#xff0c;随着数字多媒体技术的日新月异&#xff0c;展厅不再仅仅是传统的信息展示平台&#xff0c;而是成为了引领内容展示潮流的风…...

【UML用户指南】-04-从代码到UML的关键抽象

1、关键抽象 声明了一个名为paint的操作&#xff0c;它的实现调用名为drawString的另一个操作&#xff0c;drawString操作负责在指定的位置上打印“Hello,World!”。在通常的面向对象的方式下&#xff0c;drawString是一个名称为g的参数上的一个操作&#xff0c;g的类型是类Gr…...

(2024,LoRA,全量微调,低秩,强正则化,缓解遗忘,多样性)LoRA 学习更少,遗忘更少

LoRA Learns Less and Forgets Less 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 1. 引言 2. 背景 3. 实验设置 3.2 使用编码和数学基准测试来衡量学习&#xff08;目标域…...

【Java】面向对象的三大特征:封装、继承、多态

封装 什么叫封装&#xff1f; 在我们写代码的时候经常会涉及两种角色&#xff1a; 类的实现者 和 类的调用者。 封装的本质就是让类的调用者不必太多的了解类的实现者是如何实现类的&#xff0c; 只要知道如何使用类就行了&#xff0c;这样就降低了类使用者的学习和使用成本&a…...

请问Java8进阶水平中,常用的设计模式有哪些?

设计模式通常被分为三大类&#xff1a;创建型&#xff08;Creational&#xff09;、结构型&#xff08;Structural&#xff09;和行为型&#xff08;Behavioral&#xff09;。以下是这20个设计模式的分类&#xff1a; 创建型&#xff08;Creational&#xff09;设计模式&#…...

力扣--最大子数组和

给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#xff1a;…...

C# 中的字符与字符串

简介 在C#编程语言中&#xff0c;字符和字符串是处理文本数据的基础。字符是单个的字母或符号&#xff0c;而字符串是字符的集合。本篇博客将详细介绍C#中的字符类型 char 和字符串类型 string&#xff0c;以及它们的基本操作。 字符类型 char char 类型在C#中用于表示单个字…...

TPM之VMK密封

本篇文章主要介绍基于TPM的Bitlocker全盘加密时&#xff0c;VMK密钥的密封&#xff08;Seal&#xff09;流程&#xff0c;至于TPM、Bitlocker、密钥保护器、VMK密钥等这些东西是什么&#xff0c;这里不做解释&#xff0c;需要自己脑补一下&#xff08;╮(╯▽╰)╭&#xff09;…...

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源&#xff0c;支持远程调用。…...

【面试宝藏】Go基础面试题其一

探索Go语言&#xff1a;特性、用法与最佳实践 Go语言&#xff08;Golang&#xff09;自发布以来迅速成为开发者社区中的热门选择。本文将探讨Go语言的优势、数据类型、包管理、类型转换、并发处理、同步机制、通道特性及其使用中的注意事项等内容&#xff0c;并回答一些常见的…...

python如何安装pyqt4

第一步&#xff0c;下载.whl文件&#xff0c;地址&#xff1a;https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4&#xff0c;这里可以下载不同的python版本对应的包。 第二步&#xff0c;选择一个目录&#xff0c;将下载好的文件放到该目录下&#xff0c;然后cmd下&#xff…...

调用上传文件接口出现格式错误

一、造成这种错误的可能有很多 1.检查一下传递格式 2.检查一下接口要求的格式 二、举个例子 这两个有什么区别&#xff1f; 那就是json、和form-data&#xff0c;一定要看仔细接口 如果还是按照json的方式去传就会报错 三、更改header里Content-Type的类型 json等的heade…...

leetcode148. 排序链表,归并法,分治的集大成之作

leetcode148. 排序链表 题目链接 给你链表的头结点 head &#xff0c;请将其按升序排列并返回排序后的链表。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5] 示例 3&…...

一维时间序列信号的小波模极大值分解与重建(matlab R2018A)

数学上称无限次可导函数是光滑的或没有奇异性&#xff0c;若函数在某处有间断或某阶导数不连续&#xff0c;则称函数在此处有奇异性&#xff0c;该点就是奇异点。奇异性反映了信号的不规则程度&#xff0c;因为信号的奇异点和突变部分往往携带者重要信息&#xff0c;因此信号的…...

五分钟“手撕”栈

实现代码放开头&#xff0c;供大家学习与查阅 目录 一、实现代码 二、什么是栈 三、栈的常见操作 底层实现是链表。 入栈 出栈 四、Stack的使用 五、栈的习题 第一题 第二题 第三题 第四题 第五题 第六题 第七题 六、栈、虚拟机栈、栈帧的区别 目录 一、…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...