JavaScript实现页面随着某元素自动滚动(歌词居中)

在开发过程中想要使页面随着某个元素自动滚动,可以使用Element.scrollIntoView()。

下面举例一个歌词的居中显示

let lyc = document.querySelectorAll('.has-lyric li')[i] //获取当前播放的歌词lyc.scrollIntoView({behavior: "smooth", // 定义动画过渡效果, "auto"或 "smooth" 。默认为 "auto"。block: "center", // 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"。默认为 "start"。inline: "center", // 定义水平方向的对齐, "start", "center", "end", 或 "nearest"。默认为 "nearest"});//滚动到当前歌词位置

效果:页面自动滑动,播放的歌词居中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2805610.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

ChatGPT/GPT4科研应用与AI绘图及论文写作

2023年随着OpenAI开发者大会的召开,最重磅更新当属GPTs,多模态API,未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

Flink ML 的新特性解析与应用

摘要:本文整理自阿里巴巴算法专家赵伟波,在 Flink Forward Asia 2023 AI特征工程专场的分享。本篇内容主要分为以下四部分: Flink ML 概况在线学习的设计与应用在线推理的设计与应用特征工程算法与应用 一、Flink ML 概况 Flink ML 是 Apache…

算法打卡day1|数组篇|Leetcode 704.二分查找、27.移除元素

数组理论基础 数组是存放在连续内存空间上的相同类型数据的集合,可以方便的通过下标索引的方式获取到下标下对应的数据。 1.数组下标都是从0开始的。 2.数组内存空间的地址是连续的。 正是因为数组的在内存空间的地址是连续的,所以我们在删除或者增添…

ShardingSphere5.x 分库分表

一、shardingSphere介绍 1、官网:Apache ShardingSphere 2、开发文档: 概览 :: ShardingSphere 3、shardingsphere-jdbc ShardingSphere-JDBC 定位为轻量级 Java 框架,在 Java 的 JDBC 层提供的额外服务。 它使用客户端直连数据库&#x…

转运机器人,AGV底盘小车:打造高效、精准的汽车电子生产线

为了满足日益增长的市场需求,保持行业领先地位,某汽车行业电子产品企业引入富唯智能AMR智能搬运机器人及其智能物流解决方案,采用自动化运输措施优化生产节拍和搬运效率,企业生产效率得到显著提升。 项目背景: 1、工厂…

【算法与数据结构】1971、LeetCode寻找图中是否存在路径

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析:本题应用并查集的理论直接就可以解决:【算法与数据结构】回溯算法、贪心算法、动态规划、图…

深入浅出JVM(七)之执行引擎的解释执行与编译执行

本篇文章围绕执行引擎,深入浅出的解析执行引擎中解释器与编译器的解释执行和编译执行、执行引擎的执行方式、逃逸分析带来的栈上分配、锁消除、标量替换等优化以及即时编译器编译对热点代码的探测 执行引擎 hotspot执行引擎结构图 执行引擎分为解释器、JIT即时编译…

QT_day4

1.思维导图 2. 输入闹钟时间格式是小时:分钟 widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);id startTimer(1000);flag1;speecher new QTextT…

做抖音小店怎么选品?给新手商家的三条建议,能让你销量猛增999+

大家好,我是电商花花。 总是担心店铺不出单,没有销量,看着断断续续的收益,新手商家应该都是愁容满面吧。 今天花花从是3个维度上给新手商家一些建议,讲解一下如何高效选品,加你如何让你出单猛增999。 以前…

训练Sora模型,你可能需要这些开源代码,模型,数据集及算力评估

在之前的文章,我们总结了Sora模型上用到的一些核心技术和论文 复刻大模型 Sora 有多难?一张图带你读懂 Sora 的技术路径一文看懂大模型 Sora 技术推演 今天这篇文章来自我们社区讨论交流,我这边整理和总结现有的一些开源代码、模型、数据集…

【大数据】Flink 内存管理(一):设置 Flink 进程内存

Flink 内存管理(一):设置 Flink 进程内存 1.配置 Total Memory2.JVM 参数3.根据比例限制的组件(Capped Fractionated Components) Apache Flink 通过严格控制各种组件的内存使用,在 JVM 上提供高效的工作负…

【论文阅读】ICCV 2023 计算和数据高效后门攻击

文章目录 一.论文信息二.论文内容1.摘要2.引言3.主要图表4.结论 一.论文信息 论文题目: Computation and Data Efficient Backdoor Attacks(计算和数据高效后门攻击) 论文来源: 2023-ICCV(CCF-A) 论文团…

AI文生图网站测评

主要测评文章配图生成效果、绘制logo等效果 测评关键点:生成效果、网站易用度、是否免费 测评prompt:请生成一个文章内容配图,图片比例是3:2,文章主旨是AI既是机遇,也存在挑战和风险,要求图片…

Matlab/simulink基于vsg的风光储调频系统建模仿真(持续更新)

​ 1.Matlab/simulink基于vsg的风光储调频系统建模仿真(持续更新)

leet hot 100-3 最长连续序列

两数之和 原题链接思路代码 原题链接 leet hot 100-3 128. 最长连续序列 思路 可以把所有的数字放到容器里面去 维护一个最大值 每一次去遍历数字 查看但当前数字是否为起始位置(它的前面是否有比它小一位的数字) 如果是起始位置 就记录一下当前值 并…

应用回归分析:泊松回归

泊松回归是一种广泛用于计数数据的回归分析方法。它适用于响应变量是非负整数的情况,特别是当这些计数呈现出明显的离散分布时。泊松回归通过泊松分布的概率分布函数来建模计数数据,使其成为处理计数数据的自然选择。本文将介绍泊松回归的基本概念、应用…

FastJson反序列化漏洞(Fastjson1.2.47)

一、FastJson Fastjson 是一个阿里巴巴公司开源的 Java 语言编写的高性能功能完善的 JSON 库。可以将Java 对象转换为 JSON 格式(序列化),当然它也可以将 JSON 字符串转换为 Java 对象(反序列化) 它采用一种“假定有序快速匹配”的算法&…

【RAG实践】基于LlamaIndex和Qwen1.5搭建基于本地知识库的问答机器人

什么是RAG LLM会产生误导性的 “幻觉”,依赖的信息可能过时,处理特定知识时效率不高,缺乏专业领域的深度洞察,同时在推理能力上也有所欠缺。 正是在这样的背景下,检索增强生成技术(Retrieval-Augmented G…

SpringBoot -【BeanPostProcessor】基础使用及应用场景

BeanPostProcessor应用与优化 1. 引言 在现代软件开发中,企业开发面临着越来越复杂的系统架构和业务需求。随着项目规模的扩大和技术栈的增多,需要更高效的工具来应对这些挑战,并确保代码的可维护性和扩展性。 在这样的背景下,Be…

第五章虚拟机栈

第五章虚拟机栈 文章目录 第五章虚拟机栈1. 虚拟机栈概述1.1 虚拟机栈出现的背景1.2 初步印象1.2.1 内存中的栈与堆 1.3 虚拟机栈基本内容1.3.1 Java虚拟机栈是什么?1.3.2 栈的特点(优点)1.3.3 栈中可能出现的异常1.3.4 设置栈内存大小 2. 栈的存储结构2.1 栈中存储…