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…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
