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

Vue 循环走马灯

1、使用 transform: translateX(),循环将滚动内容在容器内偏移,超出容器部分隐藏;

2、避免滚动到末尾时出现空白,需要预留多几个。

3、一次循环偏移的距离scrollLoopWidth 可能受样式影响需要做些微调,比如单个item的宽度、间隔、边框等。

<template><div><div class="scroll-container"><div class="scroll-content" id="scroll-content"><div class="scroll-item" v-for="(item, index) in itemList" :key="index"><div>{{ item.title }}</div><div>{{ item.desc }}</div></div></div></div></div>
</template>
<script>
export default {data() {return {itemList: [{title: "Vue",desc: "一套用于构建用户界面的渐进式框架"},{title: "Vite",desc: "下一代前端开发与构建工具"},{title: "Pinia",desc: "Vue状态管理框架"},{title: "TypeScript",desc: "JavaScript类型的超集,可以编译成纯JavaScript"},{title: "NaiveUI",desc: "Vue3组件库"},// 重复放几个,假装无缝衔接,如果重复的个数需要多个才能铺满屏,可以使用数组的相关方法将已经滚动过了的放到数组后面{title: "Vue",desc: "一套用于构建用户界面的渐进式框架"},{title: "Vite",desc: "下一代前端开发与构建工具"},{title: "Pinia",desc: "Vue状态管理框架"}],scrollContent: "",scrollSpeed: 1, // 每次偏移像素translateX: 0,scrollInterval: 0,scrollLoopWidth: 0,}},mounted() {this.scrollContent = document.getElementById("scroll-content");let item = this.itemList.length - 3; // 一次循环移动的item数this.scrollLoopWidth = 240 * item + 10 * (2 * item + 1); // 单个宽度 * 个数 + 间隔 (注意,这里可能受样式影响,需要做适当的调整)this.scrollInterval = setInterval(() => {this.autoScrollContent();}, 10); // 每10毫秒移动 scrollSpeed 个像素},methods: {autoScrollContent() {this.translateX += this.scrollSpeed;this.scrollContent.style.transform = `translateX(${-this.translateX}px)`;// 一次循环结束,重新滚动if (this.translateX >= this.scrollLoopWidth) {this.translateX = 0;}},},
}
</script>
<style lang="stylus" scoped>.scroll-container {width: 800px;height: 400px;background-color: #e9e9e9;overflow: hidden;.scroll-content {display: flex;align-items: center;.scroll-item {width: 240px;min-width: 240px;height: 100px;text-align: center;margin: 0 10px;border: 1px solid #409eff;img {width: 50px;height: 50px;border-radius: 25px;}}}}
</style>

相关文章:

Vue 循环走马灯

1、使用 transform: translateX()&#xff0c;循环将滚动内容在容器内偏移&#xff0c;超出容器部分隐藏&#xff1b; 2、避免滚动到末尾时出现空白&#xff0c;需要预留多几个。 3、一次循环偏移的距离scrollLoopWidth 可能受样式影响需要做些微调&#xff0c;比如单个item的…...

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之Linux文件管理(3)》(27)

《Linux操作系统原理分析之Linux文件管理&#xff08;3&#xff09;》&#xff08;27&#xff09; 8 Linux文件管理8.6 文件管理和操作8.6.1 系统对文件的管理8.6.2 进程对文件的管理 8 Linux文件管理 8.6 文件管理和操作 8.6.1 系统对文件的管理 Linux 系统把所有打开的活动…...

【华为数据之道学习笔记】3-2 基础数据治理

基础数据用于对其他数据进行分类&#xff0c;在业界也称作参考数据。基础数据通常是静态的&#xff08;如国家、币种&#xff09;&#xff0c;一般在业务事件发生之前就已经预先定义。它的可选值数量有限&#xff0c;可以用作业务或IT的开关和判断条件。当基础数据的取值发生变…...

GO设计模式——7、适配器模式(结构型)

目录 适配器模式&#xff08;Adapter Pattern&#xff09; 优缺点 使用场景 注意事项 代码实现 适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁。将一个类的接口转化为客户希望的…...

Java实现TCP一对一通信,实现UDP群聊通信

TCP一对一通信: 实现服务端对话框&#xff1a; 其中可自由更改对话框的样式 import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.io.*; import java.net.*; public class QqMain extends JFrame implements ActionListener{public static void …...

Vue + Element 实现按钮指定间隔时间点击

1、业务需求 需要加一个按钮&#xff0c;调用第三方API&#xff0c;按钮十分钟之内只能点击一次&#xff0c;刷新页面也只能点击一次 2、思路 加一个本地缓存的时间戳&#xff0c;通过时间戳计算指定时间内不能点击按钮 3、实现 1&#xff09;vue页面 <template>&l…...

UE Websocket笔记

参考链接 [UE4 C入门到进阶]12.Websocket网络通信 - 哔哩哔哩 包含怎么用Nodejs 写测试服务器 UE4_使用WebSocket和Json&#xff08;上&#xff09; - 知乎 包含Python写测试服务器 UE4_使用WebSocket和Json&#xff08;下&#xff09; - 知乎 示例代码 xxx.Build.cs"W…...

STM32h7 接收各种can id情况下滤波器的配置

1、接收所有数据 /* 此处id2都为0&#xff0c;不进行id校验&#xff0c;接收所有数据*/ static void CAN_Filter_Config(void){FDCAN_FilterTypeDef sFilterConfig1;/* Configure Rx filter */sFilterConfig1.IdType FDCAN_STANDARD_ID;sFilterConfig1.FilterIndex 0;sFilte…...

《深入理解计算机系统》学习笔记 - 第三课 - 浮点数

Floating Point 浮点数 文章目录 Floating Point 浮点数分数二进制示例能代表的数浮点数的表示方式浮点数编码规格化值规格化值编码示例 非规格化的值特殊值 示例IEEE 编码的一些特殊属性四舍五入&#xff0c;相加&#xff0c;相乘四舍五入四舍五入的模式二进制数的四舍五入 浮…...

总结:服务器批量处理http请求的大致流程

总结&#xff1a;服务器批量处理http请求的大致流程 一客户端发起请求&#xff1a;可以多个请求同时发送二Web服务器解析请求&#xff08;如&#xff1a;Nginx&#xff09;&#xff1a;可以多个请求同时解析三Servlet容器接收请求&#xff08;如&#xff1a;tomcat&#xff09;…...

算法通关村第十八关-青铜挑战回溯是怎么回事

大家好我是苏麟 , 今天聊聊回溯是怎么个事 . 回溯是最重要的算法思想之一&#xff0c;主要解决一些暴力枚举也搞不定的问题&#xff0c;例如组合、分割、子集、排列&#xff0c;棋盘等。从性能角度来看回溯算法的效率并不高&#xff0c;但对于这些暴力都搞不定的算法能出结果就…...

区分node,npm,nvm

目录 一&#xff0c;nodejs二&#xff0c;npm三&#xff0c;nvm 区分node&#xff0c;npm&#xff0c;nvm 几年前学习前端的时候学习的就是htmlcssjs 三件套。 现在只学习这些已经不能满足需要了。 一&#xff0c;nodejs nodejs是编程语言javascript运行时环境。&#xff08;比…...

7-2 小霸王

幼儿园的老师给几位小朋友等量的长方体橡皮泥&#xff0c;但有个小朋友&#xff08;小霸王&#xff09;觉得自己的橡皮泥少了&#xff0c;就从另一个小朋友那里抢了一些。请问&#xff0c;是哪个小霸王抢了哪个小朋友的橡皮泥&#xff1f; 输入格式: 测试数据有多组。对于每组…...

Linux内核上游提交完整流程及示例

参考博客文章&#xff1a; 向linux内核提交代码 - 知乎 一、下载Linux内核源码 通过git下载Linux内核源码&#xff0c;具体命令如下&#xff1a; git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git 实际命令及结果如下&#xff1a; penghaoDin…...

TS学习——快速入门

TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展&#xff0c;向JS中引入了类型的概念&#xff0c;并添加了许多新的特性。TS代码需要通过编译器编译为JS&#xff0c;然后再交由JS解析器执行。TS完全兼容JS&#xff0c;换言之&#xff0c;任何的JS代码都可以直…...

深圳锐科达风力发电广播对讲解决方案

深圳锐科达风力发电广播对讲解决方案 风力发电对讲通常是在风塔的底部与机舱室安装一键对讲终端&#xff0c;可以一键呼叫控制中心值班人员&#xff0c;结构简单&#xff0c;组网方便&#xff0c;设备可以接入局域网或广域网构成功能应急呼叫系统。 系统实现的功能&#xff1…...

极智芯 | 解读国产AI算力 璧仞产品矩阵

欢迎关注我,获取我的更多经验分享 大家好,我是极智视界,本文分享一下 解读国产AI算力 璧仞产品矩阵。 璧仞在国产 AI 芯领域就是 "迷" 一样的存在,你要说它在市场上的 "建树" 泛善可陈的话,它又 "赫然" 在美国芯片禁令名单中。而这一切的一…...

Echarts折线图常见问题及案例代码

前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以帮助用户以简单的方式创建复杂的时间序列、条形图、饼图、地图等图形。 初学者,可参考下我的另外两篇文章,从基础到深入,解读饼状图的运用。 ECharts初始案例(入门) ECharts之折线图 常见问题及案例代码 …...

javaTCP协议实现一对一聊天

我们首先要完成服务端&#xff0c;不然出错&#xff0c;运行也要先运行服务端&#xff0c;如果不先连接服务端&#xff0c;就不监听&#xff0c;那客户端不知道连接谁 服务端 package d21z; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.a…...

机器学习应用 | 使用 MATLAB 进行异常检测(上)

异常检测任务&#xff0c;指的是检测偏离期望行为的事件或模式&#xff0c;可以是简单地检测数值型数据中&#xff0c;是否存在远超出正常取值范围的离群值&#xff0c;也可以是借助相对复杂的机器学习算法识别数据中隐藏的异常模式。 在不同行业中&#xff0c;异常检测的典型…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

World-writable config file /etc/mysql/mysql.conf.d/my.cnf is ignored

https://stackoverflow.com/questions/53741107/mysql-in-docker-on-ubuntu-warning-world-writable-config-file-is-ignored 修改权限 -> 重启mysql # 检查字符集配置 SHOW VARIABLES WHERE Variable_name IN (character_set_server, character_set_database ); --------…...