第三方实现跑马灯和手写实现跑马灯
目录
- 第三方实现跑马灯
- 手写实现跑马灯
- 手写实现跑马灯【整体代码】
- 自己细心研究一下上述代码
第三方实现跑马灯
- 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选项，需要等待编译完成，进入如下界面&…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
iOS 项目怎么构建稳定性保障机制？一次系统性防错经验分享（含 KeyMob 工具应用）
崩溃、内存飙升、后台任务未释放、页面卡顿、日志丢失——稳定性问题，不一定会立刻崩，但一旦积累，就是“上线后救不回来的代价”。 稳定性保障不是某个工具的功能，而是一套贯穿开发、测试、上线全流程的“观测分析防范”机制。 …...
[特殊字符] Spring Boot底层原理深度解析与高级面试题精析
一、Spring Boot底层原理详解 Spring Boot的核心设计哲学是约定优于配置和自动装配，通过简化传统Spring应用的初始化和配置流程，显著提升开发效率。其底层原理可拆解为以下核心机制： 自动装配（Auto-Configuration） 核…...
篇章一 论坛系统——前置知识
目录 1.软件开发 1.1 软件的生命周期 1.2 面向对象 1.3 CS、BS架构 1.CS架构编辑 2.BS架构 1.4 软件需求 1.需求分类 2.需求获取 1.5 需求分析 1. 工作内容 1.6 面向对象分析 1.OOA的任务 2.统一建模语言UML 3. 用例模型 3.1 用例图的元素 3.2 建立用例模型 …...
短视频时长预估算法调研
weighted LR o d d s T p 1 − p ( 1 − p ) o d d s T p ( T p o d d s ∗ p ) o d d s p o d d s T o d d s odds \frac{Tp}{1-p} \newline (1-p)odds Tp \newline (Tp odds * p) odds \newline p \frac{odds}{T odds} \newline odds1−pTp(1−p)oddsTp(Tpodds…...
大语言模型解析
1. Input Embedding embedding：将自然语言翻译成index 每个index对应一个embedding，embedding需要训练，embedding是一个数组...