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

第三方实现跑马灯和手写实现跑马灯

news 2025/11/1 9:14:24

第三方实现跑马灯

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…...

编程日记 2023/2/20 0:35:59

React Native Cannot run program “node“问题

概述前几天mac重装系统了，用Android studio重新构建React native项目时，报Cannot run program "node"错误。电脑系统为macOS 12.6.3 (Monterey)，M1 Pro芯片。设备信息如下图所示： 完整错误信息如下图所示&#xff…...

编程日记 2023/2/20 0:34:51

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运行可行…...

编程日记 2023/2/20 0:33:42

ThreadPoolExecutor管理异步线程笔记

为什么使用线程池？ 线程的创建和销毁都需要不小的系统开销，不加以控制管理容易发生OOM错误。避免线程并发抢占系统资源导致系统阻塞。具备一定的线程管理能力（数量、存活时间，任务管理） new ThreadPoolExecutor(int …...

编程日记 2023/2/20 0:32:33

MotoSimEG-VRC教程：动态输送带创建以及示教编程与仿真运行

目录任务描述简易输送带外部设备创建输送带模型添加与配置工件安装到输送带输送带输送工件程序编写与仿真运行任务描述在MotoSimEG-VRC中创建1条输送带，并且能够实现将工件从输送带起始点位置处输送到结束点位置处。简易输送带外部设备创建在MotoS…...

编程日记 2023/2/20 0:31:23

PyTorch 并行训练 DistributedDataParallel完整代码示例

使用大型数据集训练大型深度神经网络 (DNN) 的问题是深度学习领域的主要挑战。随着 DNN 和数据集规模的增加，训练这些模型的计算和内存需求也会增加。这使得在计算资源有限的单台机器上训练这些模型变得困难甚至不可能。使用大型数据集训练大型 DNN 的一些主要挑…...

编程日记 2023/2/20 0:30:12

Golang实现ttl机制保存内存数据

ttl(time-to-live) 数据存活时间，我们这里指数据在内存中保存一段时间，超过期限则不能被读取到，与Redis的ttl机制类似。本文仅实现ttl部分，不考虑序列化和反序列化。获取当前时间涉及时间计算，这里首先介绍如何获取…...

编程日记 2023/2/20 0:29:05

js中数字运算结果与预期不一致的问题和解决方案

本文主要是和大家聊聊关于js中经常出现数字运算结果与预期结果不一致的问题，与及解决该问题的的方案。一、问题现象如：0.1 0.2的预期结果是0.3，但是在js中得到的计算结果却是0.30000000000000004，如下图所示如：0…...

编程日记 2023/2/20 0:27:56

C++ Primer Plus 学习笔记（一）——基本类型

字节与字符计算机内存的基本单位是位（bit），字节（byte）通常指的是8位的内存单元，从这个意义上来说，字节指的就是描述计算机内存量的度量单位。 C对字节的定义则有些不同，C字节由至…...

编程日记 2023/2/20 0:26:46

ChatGpt与Google 谁能给出最好的回答

ChatGPT由于其先进的会话和技术功能而越来越受欢迎。你可以问聊天机器人任何你想问的问题，它会在几秒钟内输出答案。虽然它不是一个搜索引擎，你应该使用ChatGPT作为你的信息来源而不是谷歌，百度吗? 我们来根据国外的一场测试来看一下 ChatG…...

编程日记 2023/2/20 0:25:37

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. …...

编程日记 2023/2/20 0:24:26

Redis底层原理（持久化+分布式锁）

Redis底层原理持久化 Redis虽然是个内存数据库，但是Redis支持RDB和AOF （Redis Database Backup file（Redis数据备份文件），也被叫做Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中 ；Appen…...

编程日记 2023/2/20 0:23:17

Spring Cloud Nacos实战（八） - Nacos集群配置

Nacos集群配置更改Nacos启动命令配置原理我们现在知道，想要启动Naocs只需要启动startup.sh命令即可，但是如果启动3个Nacos那？所以如果我们需要启动多个Nacos，其实Nacos本身默认启动就是集群模式。注意点：如果是l…...

编程日记 2023/2/20 0:22:07

什么是低代码-甲骨文对低代码的定义

什么是低代码平台？低代码阶段使用简化的界面，允许开发人员构建应用程序和软件既用户友好又响应迅速。而不是编写几行复杂的代码和语言结构， 您可以快速轻松地利用低代码来构建具有用户界面的整体应用程序， 组合和信息。低代码可以…...

编程日记 2023/2/20 0:20:58

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奇数和① 思路② 落地…...

编程日记 2023/2/20 0:19:47