jq——实现弹幕滚动(往左滚动+往右滚动)——基础积累

最近同事在写弹幕功能,下面记录以下代码:
1.html代码
<div id="scrollContainer"></div>
2.引入jq
<script src="./script/jquery-1.8.3.js" type="text/javascript"></script>
3.jq代码——往左滚动
<script>function getRandomName() {const names = ['王','熊','张','郑','刘','李','秦','付','肖','宋','陈','杨','黄','周','吴','赵','孙','钱','朱','杜','董','程','曹','田','谢','韩','杜','叶','吕','丁',];const randomName = names[Math.floor(Math.random() * names.length)];const gender = Math.random() < 0.5 ? '先生' : '女士';return randomName + gender + '已领取';}function createFloatingBox() {const box = document.createElement('div');box.className = 'floatingBox';box.textContent = getRandomName();return box;}function startAnimation() {const container = document.getElementById('scrollContainer');function animate() {for (let i = 0; i < 3; i++) {const box = createFloatingBox();const duration = 6000; // 4 secondsconst endPosition = container.offsetWidth + 50;const startPosition = -box.offsetWidth - 50;const speed = (startPosition - endPosition) / duration;let startTime = null;function step(timestamp) {if (!startTime) startTime = timestamp;const progress = timestamp - startTime;const distance = speed * progress;if (progress < duration) {box.style.right = startPosition - distance + 'px';requestAnimationFrame(step);} else {container.removeChild(box);}}box.style.right = startPosition + 'px';if (i === 0) {box.classList.add('line1');} else if (i === 1) {box.classList.add('line2');} else {box.classList.add('line3');}container.appendChild(box);requestAnimationFrame(step);}}// Start the animation every 1 secondsetInterval(animate, 1500);}// Start the animationstartAnimation();</script>
4.jq代码——往右滚动
<script>function getRandomName() {const names = ['王','熊','张','郑','刘','李','秦','付','肖','宋','陈','杨','黄','周','吴','赵','孙','钱','朱','杜','董','程','曹','田','谢','韩','杜','叶','吕','丁',];const randomName = names[Math.floor(Math.random() * names.length)];const gender = Math.random() < 0.5 ? '先生' : '女士';return randomName + gender + '已领取';}function createFloatingBox() {const box = document.createElement('div');box.className = 'floatingBox';box.textContent = getRandomName();return box;}function startAnimation() {const container = document.getElementById('scrollContainer');function animate() {for (let i = 0; i < 3; i++) {const box = createFloatingBox();const duration = 6000; // 4 secondsconst startPosition = container.offsetWidth + 50;const endPosition = -box.offsetWidth - 50;const speed = (endPosition - startPosition) / duration;let startTime = null;function step(timestamp) {if (!startTime) startTime = timestamp;const progress = timestamp - startTime;const distance = speed * progress;if (progress < duration) {box.style.right = startPosition + distance + 'px';requestAnimationFrame(step);} else {container.removeChild(box);}}box.style.right = startPosition + 'px';if (i === 0) {box.classList.add('line1');} else if (i === 1) {box.classList.add('line2');} else {box.classList.add('line3');}container.appendChild(box);requestAnimationFrame(step);}}// Start the animation every 1 secondsetInterval(animate, 1500);}// Start the animationstartAnimation();</script>
相关文章:
jq——实现弹幕滚动(往左滚动+往右滚动)——基础积累
最近同事在写弹幕功能,下面记录以下代码: 1.html代码 <div id"scrollContainer"></div>2.引入jq <script src"./script/jquery-1.8.3.js" type"text/javascript"></script>3.jq代码——往左滚…...
深度学习第2天:RNN循环神经网络
☁️主页 Nowl 🔥专栏《机器学习实战》 《机器学习》 📑君子坐而论道,少年起而行之 文章目录 介绍 记忆功能对比展现 任务描述 导入库 处理数据 前馈神经网络 循环神经网络 编译与训练模型 模型预测 可能的问题 梯度消失 梯…...
深度学习之基于百度飞桨PaddleOCR图像字符检测识别系统
欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介主要特点使用步骤 二、功能三、系统四. 总结 一项目简介 # Introduction to PaddleOCR Image Character Detection and Recognition System Based on Baidu…...
九、LuaTable(表)
文章目录 一、定义二、Table(表)的构造三、Table 操作(一)Table连接(二)插入和移除(三)Table 排序(四)Table 最大值 一、定义 table 是 Lua 的一种数据结构用来帮助我们创建不同的数…...
每日一题(LeetCode)----链表--链表最大孪生和
每日一题(LeetCode)----链表–链表最大孪生和 1.题目(2130. 链表最大孪生和) 在一个大小为 n 且 n 为 偶数 的链表中,对于 0 < i < (n / 2) - 1 的 i ,第 i 个节点(下标从 0 开始)的孪生节点为第 (n…...
腾讯云轻量服务器通过Docker搭建外网可访问连接的redis5.x集群
原创/朱季谦 最近买了一台4核16的腾讯云轻量应用服务器,花了我快四百的大洋,打算搭建一堆docker组件集群,最先开始是通过docker搭建redis集群,计划使用三个端口,分别是7001,7002,7003。 腾讯云服务器有防火墙限制,故…...
C++学习之路(十一)C++ 用Qt5实现一个工具箱(增加一个进制转换器功能)- 示例代码拆分讲解
上篇文章,我们用 Qt5 实现了在小工具箱中添加了《时间戳转换功能》功能。为了继续丰富我们的工具箱,今天我们就再增加一个平时经常用到的功能吧,就是「 进制转换 」功能。下面我们就来看看如何来规划开发一个这样的小功能并且添加到我们的工具…...
C语言每日一题(40)栈实现队列
力扣232 用栈实现队列 题目描述 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作(push、pop、peek、empty): 实现 MyQueue 类: void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并…...
Vue.js 的生命周期
Vue.js 的生命周期钩子函数是一组在 Vue 实例生命周期中执行的函数,它们允许你在特定阶段执行自定义逻辑。以下是 Vue.js 的生命周期钩子函数以及它们在生命周期中的执行时机: 1、beforeCreate: 在实例初始化之后,数据观测 (data observer)…...
SeaTunnel引擎下的SQL Server CDC解决方案:构建高效数据管道
在快速发展的数据驱动时代,实时数据处理已经成为企业决策和运营的关键因素。特别是在处理来自各种数据源的信息时,如何确保数据的及时、准确和高效同步变得尤为重要。本文着重介绍了如何利用 SqlServer CDC 源连接器在 SeaTunnel 框架下实现 SQL Server …...
【攻防世界-misc】Encode
1.下载解压文件,打开这个内容有些疑似ROT13加密,利用在线工具解密:ROT13解码计算器 - 计算专家 得到了解密后的值 得到解码结果后,看到是由数字和字母组成,再根据题目描述为套娃,猜测为base编码(…...
visual c++ 2019 redistributable package
直接安装下面包只有24M Microsoft Visual C Redistributable 2019 x86: https://aka.ms/vs/16/release/VC_redist.x86.exe x64: https://aka.ms/vs/16/release/VC_redist.x64.exe ———————————————— 版权声明:本文为CSDN博主「kpacnB_Z」的原创文章…...
WPF中DataGrid解析
效果如图: 代码如下: <DataGrid Grid.Row"1" x:Name"dataGrid" ItemsSource"{Binding DataList}" AutoGenerateColumns"False"SelectedItem"{Binding SelectedItem,UpdateSourceTriggerPropertyChange…...
在数据库中进行表内容的修改(MYSQL)
根据表中内容,用命令语句创建数据库,表格,以及插入,修改,删除表格中的内容。 创建数据库:zrzy mysql> create database zrzy; 引用zrzy数据库: mysql> use zrzy; 创建student_info表&…...
Android中的多进程
在Android中也可以像pc一样开启多进程,这在android的编程中通常是比较少见的,以为在一个app基本上都是单进程工作就已经足够了,有一些特殊的场景,我们需要用多进程来做一些额外的工作,比如下载工作等。 在Android的An…...
Apache2.4 AliasMatch导致301重定向问题?
环境:ubuntu18.04-desktop apache2版本: rootubuntu:/etc/apache2# apache2ctl -v Server version: Apache/2.4.29 (Ubuntu) Server built: 2023-03-08T17:34:33apache配置: DocumentRoot /var/www/html # Alias就没事 # Alias "/my…...
广州华锐视点:基于VR元宇宙技术开展法律法规常识在线教学,打破地域和时间限制
随着科技的飞速发展,人类社会正逐渐迈向一个全新的时代——元宇宙。元宇宙是一个虚拟的、数字化的世界,它将现实世界与数字世界紧密相连,为人们提供了一个全新的交流、学习和娱乐平台。在这个充满无限可能的元宇宙中,法律知识同样…...
Maven——Maven使用基础
1、安装目录分析 1.1、环境变量MAVEN_HOME 环境变量指向Maven的安装目录,如下图所示: 下面看一下该目录的结构和内容: bin:该目录包含了mvn运行的脚本,这些脚本用来配置Java命令,准备好classpath和相关…...
U4_2:图论之MST/Prim/Kruskal
文章目录 一、最小生成树-MST生成MST策略一些定义 思路彩蛋 二、普里姆算法(Prim算法)思路算法流程数据存储分析 伪代码时间复杂度分析 三、克鲁斯卡尔算法(Kruskal算法)分析算法流程并查集-Find-set 伪代码时间复杂度分析 一、最…...
springboot 注解@JsonInclude
修饰 实体属性or实体类 //枚举值:ALWAYS,NON_NULL,NON_ABSENT,NON_EMPTY,NON_DEFAULT,CUSTOM,USE_DEFAULTS JsonInclude(Include.NON_EMPTY)//将该标记放在属性上,如果该属性为NULL则不参与序列化 //如果放在类上边,那对这个类的全部属性起作用 Inclu…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
