第三方实现跑马灯和手写实现跑马灯
目录
- 第三方实现跑马灯
- 手写实现跑马灯
- 手写实现跑马灯【整体代码】
- 自己细心研究一下上述代码
第三方实现跑马灯
- https://vue3-marquee.vercel.app/guide.html#changes-from-v2
- https://evodiaaut.github.io/vue-marquee-text-component/
手写实现跑马灯
CSS部分
<style>.marquee-wrap {box-sizing: border-box;width: 814px;height: 36px;background-color: rgba(255, 255, 255, 0);background-image: linear-gradient(to left,rgba(255, 255, 255, 0),#dfbb7b,rgba(255, 255, 255, 0));line-height: 24px;font-size: 16px;text-align: center;border-radius: 5px;overflow: hidden;user-select: none;color: #181818;position: absolute;top: 290px;left: 58%;transform: translateX(-50%);}.scroll_div {white-space: nowrap;overflow: hidden;}.scroll_div pre {display: inline-block;height: 36px;margin: 0px;line-height: 36px;}</style>
HTML部分
<div class="marquee-wrap"><div class="marquee-content"><div class="scroll_div"><pre class="scroll_begin" id="marqueeList"></pre><pre class="scroll_end" style="display: inline-block"></pre></div></div></div>
JS部分
<script>initMarquee();// 设置滚动var scroll_div = document.getElementsByClassName("scroll_div")[0];var scroll_begin = document.getElementsByClassName("scroll_begin")[0];var scroll_end = document.getElementsByClassName("scroll_end")[0];function initMarquee() {var processedCfg = {};// 假数据processedCfg.marqueeList = [{ id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },{ id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },{ id: 3, user: "2624*****", name: " 防暴机器人 布里茨 " },{ id: 4, user: "2624*****", name: " 创世之神 内瑟斯 " },{ id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },{ id: 6, user: "2624*****", name: " 摄魂男爵 弗拉基米尔 " },{ id: 7, user: "2624*****", name: " 传统造型 特朗德尔 " },{ id: 8, user: "2624*****", name: " 夜行义贼 艾瑞莉娅 " },{ id: 9, user: "3012*****", name: " 海贼 瑞兹 " },{ id: 10, user: "3561*****", name: " 灵魂烈焰 布兰德 " },{ id: 11, user: "1104*****", name: " 恶咒亡魂 魔腾 " },{ id: 12, user: "1228*****", name: " 炎爆 慎 " },{ id: 13, user: "1340*****", name: " 苍穹之光 维克兹 " },{ id: 14, user: "3080*****", name: " 极度深寒 拉莫斯 " },{ id: 15, user: "1198*****", name: " 战斗学院 永恩 " },{ id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉娅 " },{ id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },{ id: 18, user: "9748*****", name: " 猎天使魔女 薇恩 " },{ id: 19, user: "2421*****", name: " 冰雪节 辛吉德 " },{ id: 20, user: "4039*****", name: " 霹雳游侠 弗拉基米尔 " },{ id: 21, user: "1915*****", name: " 奥术师 萨科 " },{ id: 22, user: "2864*****", name: " 屠龙勇士 图奇 " },{ id: 23, user: "2864*****", name: " 虚空执事 玛尔扎哈 " },{ id: 24, user: "2864*****", name: " 银河魔装机神 菲兹 " },{ id: 25, user: "4039*****", name: " 糖果女巫 璐璐 " },{ id: 26, user: "1607*****", name: " 飞车暴走族 古拉加斯 " },{ id: 27, user: "1249*****", name: " 梅花国王 莫德凯撒 " },{ id: 28, user: "1249*****", name: " 野兽猎人 德莱文 " },{ id: 29, user: "1249*****", name: " 战地之王 加里奥 " },{ id: 30, user: "4119*****", name: " 圣诞捣蛋鬼 金克丝 " },{ id: 31, user: "1249*****", name: " 雪默丁格 " },{ id: 32, user: "8772*****", name: " 黯晶战神 赛恩 " },{ id: 33, user: "8772*****", name: " 持胡萝卜的雪人 易 " },{ id: 34, user: "1781*****", name: " 绿茵门神 茂凯 " },{ id: 35, user: "4039*****", name: " 品酒大师 古拉加斯 " },{id: 36,user: "8772*****",name: " 五杀摇滚 III：遗失的章节 卡尔萨斯 "}];var marqueeListHtml = "";for (var i in processedCfg.marqueeList) {marqueeListHtml +="<span>用户 " +processedCfg.marqueeList[i].user +" 抽中 " +processedCfg.marqueeList[i].name +" </span>";}document.getElementById("marqueeList").innerHTML = marqueeListHtml;scroll_div = document.getElementsByClassName("scroll_div")[0];scroll_begin = document.getElementsByClassName("scroll_begin")[0];scroll_end = document.getElementsByClassName("scroll_end")[0];if (scroll_begin && scroll_begin.offsetWidth > scroll_div.offsetWidth) {ScrollImgLeft();scroll_end.style.display = "inline-block";}// 文字横向滚动function ScrollImgLeft() {var speed = 100; // 滚动速度var MyMar = null; // 计时器scroll_end.innerText = scroll_begin.innerText;function Marquee() {if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {scroll_div.scrollLeft -= scroll_begin.offsetWidth;} else {scroll_div.scrollLeft += 2;}}MyMar = setInterval(Marquee, speed);}}</script>
手写实现跑马灯【整体代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>走马灯</title><style>.marquee-wrap {box-sizing: border-box;width: 814px;height: 36px;background-color: rgba(255, 255, 255, 0);background-image: linear-gradient(to left,rgba(255, 255, 255, 0),#dfbb7b,rgba(255, 255, 255, 0));line-height: 24px;font-size: 16px;text-align: center;border-radius: 5px;overflow: hidden;user-select: none;color: #181818;position: absolute;top: 290px;left: 58%;transform: translateX(-50%);}.scroll_div {white-space: nowrap;overflow: hidden;}.scroll_div pre {display: inline-block;height: 36px;margin: 0px;line-height: 36px;}</style></head><body><div class="marquee-wrap"><div class="marquee-content"><div class="scroll_div"><pre class="scroll_begin" id="marqueeList"></pre><pre class="scroll_end" style="display: inline-block"></pre></div></div></div><script>initMarquee();// 设置滚动var scroll_div = document.getElementsByClassName("scroll_div")[0];var scroll_begin = document.getElementsByClassName("scroll_begin")[0];var scroll_end = document.getElementsByClassName("scroll_end")[0];function initMarquee() {var processedCfg = {};// 假数据processedCfg.marqueeList = [{ id: 1, user: "2624*****", name: " 黯晶巨牛 阿利斯塔 " },{ id: 2, user: "2624*****", name: " 咖啡甜心 索拉卡 " },{ id: 3, user: "2624*****", name: " 防暴机器人 布里茨 " },{ id: 4, user: "2624*****", name: " 创世之神 内瑟斯 " },{ id: 5, user: "2624*****", name: " 秩序之舌 塔姆 " },{ id: 6, user: "2624*****", name: " 摄魂男爵 弗拉基米尔 " },{ id: 7, user: "2624*****", name: " 传统造型 特朗德尔 " },{ id: 8, user: "2624*****", name: " 夜行义贼 艾瑞莉娅 " },{ id: 9, user: "3012*****", name: " 海贼 瑞兹 " },{ id: 10, user: "3561*****", name: " 灵魂烈焰 布兰德 " },{ id: 11, user: "1104*****", name: " 恶咒亡魂 魔腾 " },{ id: 12, user: "1228*****", name: " 炎爆 慎 " },{ id: 13, user: "1340*****", name: " 苍穹之光 维克兹 " },{ id: 14, user: "3080*****", name: " 极度深寒 拉莫斯 " },{ id: 15, user: "1198*****", name: " 战斗学院 永恩 " },{ id: 16, user: "9748*****", name: " 光明哨兵 艾瑞莉娅 " },{ id: 17, user: "1612*****", name: " 魔幻卡牌 崔斯特 " },{ id: 18, user: "9748*****", name: " 猎天使魔女 薇恩 " },{ id: 19, user: "2421*****", name: " 冰雪节 辛吉德 " },{ id: 20, user: "4039*****", name: " 霹雳游侠 弗拉基米尔 " },{ id: 21, user: "1915*****", name: " 奥术师 萨科 " },{ id: 22, user: "2864*****", name: " 屠龙勇士 图奇 " },{ id: 23, user: "2864*****", name: " 虚空执事 玛尔扎哈 " },{ id: 24, user: "2864*****", name: " 银河魔装机神 菲兹 " },{ id: 25, user: "4039*****", name: " 糖果女巫 璐璐 " },{ id: 26, user: "1607*****", name: " 飞车暴走族 古拉加斯 " },{ id: 27, user: "1249*****", name: " 梅花国王 莫德凯撒 " },{ id: 28, user: "1249*****", name: " 野兽猎人 德莱文 " },{ id: 29, user: "1249*****", name: " 战地之王 加里奥 " },{ id: 30, user: "4119*****", name: " 圣诞捣蛋鬼 金克丝 " },{ id: 31, user: "1249*****", name: " 雪默丁格 " },{ id: 32, user: "8772*****", name: " 黯晶战神 赛恩 " },{ id: 33, user: "8772*****", name: " 持胡萝卜的雪人 易 " },{ id: 34, user: "1781*****", name: " 绿茵门神 茂凯 " },{ id: 35, user: "4039*****", name: " 品酒大师 古拉加斯 " },{id: 36,user: "8772*****",name: " 五杀摇滚 III：遗失的章节 卡尔萨斯 "}];var marqueeListHtml = "";for (var i in processedCfg.marqueeList) {marqueeListHtml +="<span>用户 " +processedCfg.marqueeList[i].user +" 抽中 " +processedCfg.marqueeList[i].name +" </span>";}document.getElementById("marqueeList").innerHTML = marqueeListHtml;scroll_div = document.getElementsByClassName("scroll_div")[0];scroll_begin = document.getElementsByClassName("scroll_begin")[0];scroll_end = document.getElementsByClassName("scroll_end")[0];if (scroll_begin && scroll_begin.offsetWidth > scroll_div.offsetWidth) {ScrollImgLeft();scroll_end.style.display = "inline-block";}// 文字横向滚动function ScrollImgLeft() {var speed = 100; // 滚动速度var MyMar = null; // 计时器scroll_end.innerText = scroll_begin.innerText;function Marquee() {if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {scroll_div.scrollLeft -= scroll_begin.offsetWidth;} else {scroll_div.scrollLeft += 2;}}MyMar = setInterval(Marquee, speed);}}</script></body>
</html>自己细心研究一下上述代码
Have a Nice Day~
相关文章：
第三方实现跑马灯和手写实现跑马灯
目录第三方实现跑马灯手写实现跑马灯手写实现跑马灯【整体代码】自己细心研究一下上述代码第三方实现跑马灯 https://vue3-marquee.vercel.app/guide.html#changes-from-v2https://evodiaaut.github.io/vue-marquee-text-component/ 手写实现跑马灯 CSS部分 <style>.m…...
React Native Cannot run program “node“问题
概述 前几天mac重装系统了，用Android studio重新构建React native项目时，报Cannot run program "node"错误。 电脑系统为macOS 12.6.3 (Monterey)，M1 Pro芯片。设备信息如下图所示： 完整错误信息如下图所示ÿ…...
python基于vue微信小程序 房屋租赁出租系统
目录 1 绪论 1 1.1课题背景 1 1.2课题研究现状 1 1.3初步设计方法与实施方案 2 1.4本文研究内容 2 2 系统开发环境 4 2.1 2.2MyEclipse环境配置 4 2.3 B/S结构简介 4 2.4MySQL数据库 5 2. 3 系统分析 6 3.1系统可行性分析 6 3.1.1经济可行性 6 3.1.2技术可行性 6 3.1.3运行可行…...
ThreadPoolExecutor管理异步线程笔记
为什么使用线程池？ 线程的创建和销毁都需要不小的系统开销，不加以控制管理容易发生OOM错误。避免线程并发抢占系统资源导致系统阻塞。具备一定的线程管理能力（数量、存活时间，任务管理） new ThreadPoolExecutor(int …...
MotoSimEG-VRC教程：动态输送带创建以及示教编程与仿真运行
目录 任务描述 简易输送带外部设备创建 输送带模型添加与配置 工件安装到输送带 输送带输送工件程序编写与仿真运行 任务描述 在MotoSimEG-VRC中创建1条输送带，并且能够实现将工件从输送带起始点位置处输送到结束点位置处。 简易输送带外部设备创建 在MotoS…...
PyTorch 并行训练 DistributedDataParallel完整代码示例
使用大型数据集训练大型深度神经网络 (DNN) 的问题是深度学习领域的主要挑战。 随着 DNN 和数据集规模的增加，训练这些模型的计算和内存需求也会增加。 这使得在计算资源有限的单台机器上训练这些模型变得困难甚至不可能。 使用大型数据集训练大型 DNN 的一些主要挑…...
Golang实现ttl机制保存内存数据
ttl(time-to-live) 数据存活时间，我们这里指数据在内存中保存一段时间，超过期限则不能被读取到，与Redis的ttl机制类似。本文仅实现ttl部分，不考虑序列化和反序列化。 获取当前时间 涉及时间计算，这里首先介绍如何获取…...
js中数字运算结果与预期不一致的问题和解决方案
本文主要是和大家聊聊关于js中经常出现数字运算结果与预期结果不一致的问题，与及解决该问题的的方案。 一、问题现象 如：0.1 0.2的预期结果是0.3，但是在js中得到的计算结果却是0.30000000000000004，如下图所示 如：0…...
C++ Primer Plus 学习笔记（一）——基本类型
字节与字符 计算机内存的基本单位是位（bit），字节（byte）通常指的是8位的内存单元，从这个意义上来说，字节指的就是描述计算机内存量的度量单位。 C对字节的定义则有些不同，C字节由至…...
ChatGpt与Google 谁能给出最好的回答
ChatGPT由于其先进的会话和技术功能而越来越受欢迎。你可以问聊天机器人任何你想问的问题，它会在几秒钟内输出答案。虽然它不是一个搜索引擎，你应该使用ChatGPT作为你的信息来源而不是谷歌，百度吗? 我们来根据国外的一场测试来看一下 ChatG…...
【Redis】一、CentOS64 安装 Redis
1.下载redis https://download.redis.io/releases/2.将 redis 安装包拷贝到 /opt/ 目录 最好自己创建一个文件夹 3.解压 tar -zvxf redis-6.2.1.tar.gz4. 安装gcc yum install gcc5. 进入目录 cd /opt/redis/redis-6.2.1/6. 编译 make7.执行 make install 进行安装 8. …...
Redis底层原理（持久化+分布式锁）
Redis底层原理 持久化 Redis虽然是个内存数据库，但是Redis支持RDB和AOF （Redis Database Backup file（Redis数据备份文件），也被叫做Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中 ；Appen…...
Spring Cloud Nacos实战（八） - Nacos集群配置
Nacos集群配置 更改Nacos启动命令配置原理 我们现在知道，想要启动Naocs只需要启动startup.sh命令即可，但是如果启动3个Nacos那？所以如果我们需要启动多个Nacos，其实Nacos本身默认启动就是集群模式。 注意点：如果是l…...
什么是低代码-甲骨文对低代码的定义
什么是低代码平台？低代码阶段使用简化的界面，允许开发人员构建应用程序和软件 既用户友好又响应迅速。而不是编写几行复杂的代码和语言结构， 您可以快速轻松地利用低代码来构建具有用户界面的整体应用程序， 组合和信息。低代码可以…...
shell编程之循环语句
typora-copy-images-to: pictures typora-root-url: …\pictures 文章目录typora-copy-images-to: pictures typora-root-url: ..\..\pictures一、for循环语句1. for循环语法结构㈠ 列表循环㈡ 不带列表循环㈢ 类C风格的for循环2. 应用案例㈠ 脚本计算1-100奇数和① 思路② 落地…...
神经动力学-第一章-神经动力学基础-神经系统的元素
神经元和数学 本章的主要目的是介绍神经科学的几个基本概念，尤其是动作电位、突触后电位、触发阈值、不应期和适应性。基于这些概念，建立了神经元动力学的初步模型，这个简单的模型（漏积分-火模型）将作为本书主题——广义积分-火模型的起点和参考，在第二部分和第三部分进…...
【力扣-LeetCode】64. 最小路径和 C++题解
64. 最小路径和难度中等1430收藏分享切换为英文接收动态反馈给定一个包含非负整数的 m x n 网格 grid ，请找出一条从左上角到右下角的路径，使得路径上的数字总和为最小。说明：每次只能向下或者向右移动一步。示例 1：输入ÿ…...
Mysql数据库事务
数据库事务 数据库事务由一组sql语句组成。 所有sql语句执行成功则事务整体成功；任一条sql语句失败则事务整体失败，数据恢复到事务之前的状态。 Mysql 事务操作 开始事务 start transaction;- 或 begin;事务开始后，对数据的增删改操作不…...
【opencv源码解析0.3】调试opencv源码的两种方式
调试opencv源码的两种方式 上两篇我们分别讲了如何配置opencv环境，以及如何编译opencv源码方便我们阅读。但我们还是无法调试我们的代码，无法以我们的程序作为入口来一步一步单点调试看opencv是如何执行的。 【opencv源码解析0.1】VS如何优雅的配置ope…...
Xcode Archives打包上传 / 导出ipa 发布至TestFlight
Xcode自带的Archives工具可以傻瓜式上传到App Store Connect分发这里以分发到TestFlight为例进行操作。 环境：Xcode 14 一：Archives打包 选择Xcode菜单栏的Product，Archives选项，需要等待编译完成，进入如下界面&…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路 右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...