Vivo 手机官网交互效果实现解析
在现代网页设计中，流畅的滚动交互和精美的视觉效果是提升用户体验的关键。本文将深入解析 Vivo 手机官网 Demo 中的一个核心交互效果 —— 基于滚轮滚动的内容展示系统。这个系统允许用户通过滚动鼠标滚轮来浏览不同的手机镜头配置信息，同时伴随平滑的过渡动画和视觉反馈。
交互效果概述
这个交互效果主要由三部分组成：
- 垂直滚动指示器：显示当前滚动位置
- 左侧文本导航：根据滚动位置高亮不同的配置选项
- 右侧信息面板：展示详细的镜头配置信息，随滚动平滑切换
效果预览：
当用户滚动鼠标滚轮时，页面不会发生传统的滚动，而是触发自定义的交互逻辑：红色指示器会在垂直刻度线上移动，左侧文本导航会高亮对应选项，右侧信息面板会平滑切换显示内容。
核心技术实现
1. HTML 结构设计
页面主要包含三个部分：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Vivo手机官网Demo</title><script src="js/jquery-3.7.1.min.js"></script><link rel="stylesheet" href="./css/new_file.css" /></head><body><div class="bigContent"><img class="imgs" src="./img/9a83bd1d-09e6-4fa0-bee7-b34a1c0370eb.png" alt="" /><div class="verticalLine"><div class="red-line" id="redLine"></div></div></div><div class="textContent"><div class="block">影像配置</div><div class="block">观演神器</div><div class="block">街拍神器</div><div class="block">视频</div><div class="block">人像</div></div><!-- 文字1 --><div class="textCenter" id="textCenter1"><div class="text1">85mm 蔡司 APO 超级长焦镜头 II</div><div class="text2">蓝图 × 三星 HP9 | 2 亿像素 | 1/1.4" |<br />f/2.27 | 85mm 等效焦距 | CIPA 5.0 专业级防抖1 |<br />OIS 光学防抖</div><div class="click1">➕ 点击探索 14mm 蔡司超广角镜头</div></div><!-- 文字2 --><div class="textCenter" id="textCenter2"><div class="text1">14mm 蔡司超广角镜头</div><div class="text2">蓝图 × 索尼 LYT-818 | 5000 万像素 | 1/1.28" | f/2.0 |<br />14mm 等效焦距 | CIPA 5.0 专业级防抖1 | OIS 光学防抖</div><div class="click1">➕点击探索 14mm 蔡司超广角镜头</div></div><!-- 文字3 --><div class="textCenter" id="textCenter3"><div class="text1">35mm 蔡司人文纪实镜头</div><div class="text2">蓝图 x 索尼 LYT-818 | 5000 万像素 | 1/1.28" | f/1.69 |<br />35mm 等效焦距 | CIPA 5.0 专业级防抖1 | OIS 光学防抖</div><div class="click1">➕ 点击探索 35mm 蔡司人文纪实镜头</div></div><script src="js/new_file.js"></script></body>
</html>- 主内容区（包含背景图片和垂直滚动指示器）
- 左侧文本导航
- 右侧信息面板（三个面板，分别对应不同镜头配置）
每个信息面板包含标题、详细描述和一个交互按钮，按钮在悬停时有平滑的颜色和位置变化效果。
2. CSS 样式优化
为了实现流畅的视觉效果，CSS 中添加了多种过渡动画：
* {padding: 0;margin: 0;
}body {background-color: black;color: white;font-family: Arial, sans-serif;
}.bigContent {width: 1300px;padding-top: 450px;position: relative;
}.imgs {width: 100%;position: absolute;left: -100px;
}/* 横线样式 */
.axis-line {height: 1px;background: dimgray;margin-top: 5px;
}/* 红色刻度线样式 */
.red-line {position: absolute;width: 100%;height: 2px;background: red;top: 0;left: 0;transition: top 0.2s ease;z-index: 2;
}.verticalLine {width: 10px;overflow: hidden;margin-left: 50px;position: absolute;top: 370px;height: 210px;/* (6px * 35 lines) */cursor: ns-resize;
}.block {color: gray;margin-left: 80px;z-index: 9999;height: 50px;line-height: 50px;transition: all 0.3s ease;
}.block.highlight {color: white;font-size: 1.2em;transform: translateX(5px);
}.textContent {position: absolute;top: 365px;font-size: 12px;
}#textCenter1 {/* width: 300px; */height: 275px;border-left: 1px solid white;position: absolute;left: 916px;top: 218px;opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;
}.text1 {margin-left: 30px;margin-bottom: 10px;font-size: 35px;font-weight: bold;
}.text2 {margin-left: 30px;font-size: 19px;line-height: 1.5;font-weight: 600;color: gray;
}#textCenter2 {height: 347px;border-left: 1px solid white;position: absolute;left: 767px;top: 209px;opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;}#textCenter3 {height: 290px;border-left: 1px solid white;position: absolute;left: 747px;top: 200px;opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;
}.click1 {margin-top: 50px;margin-left: 30px;padding: 5px 10px;width: 300px;border-radius: 50px;display: flex;align-items: center;justify-content: center;background-color: #272727;color: #C8CCCC;font-weight: 600;cursor: pointer;transition: all 0.5s ease;/* 添加过渡效果 */
}.click1:hover {background-color: white;/* 悬浮时背景变为白色 */color: #272727;/* 悬浮时文字变为深色 */transform: translateY(-2px);/* 轻微上浮效果 */box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);/* 添加阴影 */
}- 信息面板的淡入淡出和垂直位移效果
- 文本导航的高亮状态变化
- 按钮的悬停效果（颜色变化、上浮和阴影）
特别值得注意的是，信息面板的显示和隐藏不是简单的切换，而是通过透明度和位置的连续变化实现平滑过渡，增强了页面的层次感和动态效果。
3. JavaScript 交互逻辑
整个交互的核心在于 JavaScript 代码，主要实现了以下功能：
3.1 滚动控制
通过监听鼠标滚轮事件，阻止默认滚动行为，实现自定义的滚动逻辑
$(document).on('wheel', { passive: false }, function(e) {e.preventDefault();e.stopPropagation();// 根据滚轮方向更新位置if (e.originalEvent.deltaY > 0) {scrollPosition = Math.min(scrollPosition + scrollSpeed, maxPosition);} else {scrollPosition = Math.max(scrollPosition - scrollSpeed, 0);}// 更新UI显示updatePosition();highlightBlock();updateText();
});
3.2 垂直指示器
根据当前滚动位置计算并更新红色指示器的位置
function updatePosition() {redLine.css('top', scrollPosition * lineHeight + 'px');
}
3.3 文本导航高亮
将滚动位置映射到对应的文本块索引，实现高亮效果
function highlightBlock() {blocks.removeClass('highlight');const blockIndex = Math.floor(scrollPosition / (maxPosition / (blockCount - 1)));const safeIndex = Math.min(blockIndex, blockCount - 1);blocks.eq(safeIndex).addClass('highlight');
}
3.4 信息面板显示控制
这是最复杂的部分，将整个滚动范围划分为三个区间，每个区间对应一个信息面板。每个面板的显示分为两个阶段：
function updateText() {textCenters.each(function(index) {const textCenter = $(this);const interval = textIntervals[index];// 计算当前位置在区间中的相对比例let ratio = 0;if (scrollPosition < interval.start) {ratio = 0;} else if (scrollPosition > interval.end) {ratio = 0;} else {// 计算相对位置并调整比例以实现淡入淡出效果const range = interval.end - interval.start;ratio = (scrollPosition - interval.start) / range;if (ratio < 0.5) {// 淡入阶段 (0-0.5)ratio = ratio * 2;} else {// 淡出阶段 (0.5-1)ratio = 1 - ((ratio - 0.5) * 2);}}// 应用透明度和位置变换textCenter.css({opacity: ratio,transform: `translateY(${20 * (1 - ratio)}px)`});});
}
js代码总览：
$(function() {// 页面加载完成后执行的代码let lineNum = 35; // 定义垂直滚动条上的刻度线总数const verticalLine = $('.verticalLine'); // 获取垂直滚动条容器元素const redLine = $('#redLine'); // 获取红色指示线元素const blocks = $('.block'); // 获取所有文本块元素（影像配置、观演神器等）const textCenters = $('.textCenter'); // 获取所有右侧信息面板元素let scrollPosition = 0; // 当前滚动位置，初始为0const maxPosition = lineNum - 1; // 最大滚动位置（从0开始计数）const blockCount = blocks.length; // 文本块的数量（5个）const lineHeight = 6; // 每个刻度线的高度（像素）const scrollSpeed = 0.5; // 控制每次滚动的距离// 定义滚动区间const textIntervals = [{start: 0,end: 3}, // 第一个面板显示区间{start: 3,end: 6}, // 第二个面板显示区间{start: 6,end: 9} // 第三个面板显示区间];// 创建刻度线 - 在垂直滚动条容器中添加35条横线for (let i = 0; i < lineNum; i++) {$('<div>').addClass('axis-line').appendTo(verticalLine);}// 设置红色刻度线初始位置updatePosition();// 将滚轮事件绑定到document，处理鼠标滚动$(document).on('wheel', function(e) {e.preventDefault(); // 阻止默认滚动行为e.stopPropagation(); // 阻止事件冒泡// 根据滚轮方向更新位置if (e.originalEvent.deltaY > 0) {// 向下滚动，增加当前位置，但不超过最大位置（位置+距离）scrollPosition = Math.min(scrollPosition + scrollSpeed, maxPosition);} else {// 向上滚动，减少当前位置，但不小于0（位置-距离）scrollPosition = Math.max(scrollPosition - scrollSpeed, 0);}// 更新UI显示updatePosition(); // 更新红色指示线位置highlightBlock(); // 高亮对应的文本块updateText(); // 更新信息面板的显示状态});// 更新红色刻度线位置的函数function updatePosition() {// 根据当前位置计算红色指示线的top值redLine.css('top', scrollPosition * lineHeight + 'px');}// 高亮对应文本块的函数function highlightBlock() {// 清除所有文本块的高亮状态blocks.removeClass('highlight');// 计算当前应该高亮的文本块索引// (计算当前滚动位置所在的范围(计算每个文本块对应的滚动范围（）)) const blockIndex = Math.floor(scrollPosition / (maxPosition / (blockCount - 1)));// 确保索引不超过文本块数量const safeIndex = Math.min(blockIndex, blockCount - 1);// 高亮对应的文本块blocks.eq(safeIndex).addClass('highlight');}// 更新所有信息面板显示状态的函数function updateText() {textCenters.each(function(index) {const textCenter = $(this); // 当前处理的面板const interval = textIntervals[index]; // 当前面板的显示区间（如 [0,4]、[4,8] 等）// 情况1：滚动位置在区间之前，完全隐藏面板if (scrollPosition < interval.start) {textCenter.css({opacity: 0,transform: 'translateY(20px)' // 下移20px并完全透明});}// 情况2：滚动位置在区间之后，完全隐藏面板else if (scrollPosition > interval.end) {textCenter.css({opacity: 0,transform: 'translateY(20px)' // 同样下移20px并完全透明});}// 情况3：滚动位置在区间的前半部分（显示阶段）else if (scrollPosition < interval.start + (interval.end - interval.start) * 0.5) {// 计算当前位置在前半段的进度比例（0~1）const ratio = (scrollPosition - interval.start) / ((interval.end - interval.start) *0.5);textCenter.css({opacity: ratio, // 透明度从0渐变为1transform: `translateY(${20 * (1 - ratio)}px)` // 位置从下移20px渐变为0});}// 情况4：滚动位置在区间的后半部分（隐藏阶段）else {// 计算当前位置在后半段的进度比例（0~1），并反转（1~0）const ratio = 1 - ((scrollPosition - (interval.start + (interval.end - interval.start) * 0.5)) /((interval.end - interval.start) * 0.5));textCenter.css({opacity: ratio, // 透明度从1渐变为0transform: `translateY(${20 * (1 - ratio)}px)` // 位置从0渐变为下移20px});}});}// 初始高亮第一个块并更新文本显示状态highlightBlock();updateText();
});相关文章：
Vivo 手机官网交互效果实现解析
在现代网页设计中，流畅的滚动交互和精美的视觉效果是提升用户体验的关键。本文将深入解析 Vivo 手机官网 Demo 中的一个核心交互效果 —— 基于滚轮滚动的内容展示系统。这个系统允许用户通过滚动鼠标滚轮来浏览不同的手机镜头配置信息，同时伴随平滑的过…...
powershell批处理——io校验
powershell批处理——io校验 在刷题时，时常回想，OJ平台是如何校验竞赛队员提交的代码的，OJ平台并不看代码，而是使用“黑盒测试”，用测试数据来验证。对于每题，都事先设定了很多组输入数据（data…...
AI——认知建模工具：ACT-R
ACT-R（Adaptive Control of Thought—Rational）是一种用于模拟人类认知过程的计算架构，广泛应用于心理学、认知科学和人工智能研究。它通过模块化的方式模拟记忆、注意力、学习、决策等认知机制。以下是ACT-R的核心概念、安装方法、基础语法及…...
Docker 容器镜像环境的依赖导出
#工作记录 如果我们想获取 Docker 容器中已有镜像的所有的依赖包信息，包括其他可能的系统依赖，用于在其他环境（如 WSL 或 Windows）中重新搭建相同的运行环境。 以下是完整的步骤： 1. 导出 Python 依赖（r…...
[ubuntu]fatal error: Eigen/Core: No such file or directory
确认是否安装了eigen3sudo apt-get install libeigen3-dev 解决 fatal error: Eigen/Core: No such file or directory 如果已经安装，但当调用 eigen 库时，报错：fatal error: Eigen/Core: No such file or directory 这是因为 eigen 库默认…...
《硬件视界》专栏介绍（持续更新ing）
名人说：路漫漫其修远兮，吾将上下而求索。 —— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录 ✨ 专栏简介📚 当前专栏目录（持续更新中）&a…...
TypeScript类型挑战-刷题
TypeScript类型挑战 vscode刷题 vscode 插件 热身题 // Test Cases import type { Equal, Expect, NotAny } from "./test-utils";type cases [Expect<NotAny<HelloWorld>>, Expect<Equal<HelloWorld, string>>];// Your Code Here …...
Java后端开发day43--IO流（三）--缓冲流转换流序列化流
（以下内容全部来自上述课程） 缓冲流 1. 字节缓冲流 原理：底层自带了长度为8192的缓冲区提高性能 1.1拷贝文件（一次读写一个字节） //1.创建缓冲流的对象 BufferedInputStream bis new BufferedInputStream(new Fi…...
Nginx性能调优与深度监控
一：Nginx性能调优 1.更改进程数和连接数 （1）进程数 在高并发环境中，需要启动更多的Nginx进程以保证快速响应，用以处理用户的请求，避免造成阻塞。使用psaux命令查看Nginx运行进程的个数。从命令执行结果可…...
【LeetCode】高频 SQL 50题 题解
目录 查询 可回收且低脂的产品 寻找用户推荐人 大的国家 文章浏览 I 无效的推文 连接 使用唯一标识码替换员工ID 产品销售分析 I 进店却未进行过交易的顾客 上升的温度 每台机器的进程平均运行时间 员工奖金 学生们参加各科测试的次数 至少有5名直接下属的经理 …...
基于Qt的app开发第六天
写在前面 博主是一个大一下的计科生，现在正在做C面向对象程序设计的课程设计，具体功能可以看本专栏的第一篇博客。 目前的进度是：配好MySQL驱动->设计完界面->实现各个界面的切换 这一篇博主要初步实现待办板块的功能，即新建…...
剑指大规模 AI 可观测，阿里云 Prometheus 2.0 应运而生
作者：曾庆国（悦达） Prometheus 大家应该非常熟悉，正文开始前，让我们一起来回顾开源 Prometheus 项目的发展史。Prometheus 最初由 SoundCloud 的工程师 Bjrn Rabehl 和 Julius Volz 于 2012 年开发。当时，…...
阿里云2核2g安装nexus
阿里云2核2g安装nexus # 安装 JDK 1.8 sudo yum install -y java-1.8.0-openjdk-devel# 验证安装 java -version创建运行用户 cd /opt sudo wget https://download.sonatype.com/nexus/3/latest-unix.tar.gz sudo tar -xzf latest-unix.tar.gz sudo mv nexus-3* nexussudo us…...
eFish-SBC-RK3576工控板USB HOST接口USB3.0测试操作指南
本小节特指丝印号为J8的USB HOST接口，本开发板只有两个USB3.0接口，无USB2.0 这里接U盘测试。 在不接入任何USB外设的情况下，先查看/dev目录下是否存在/dev/sd*设备，执行命令： $ ls /dev/sd* 如下图所示： …...
嵌入式软件学习指南：从入门到进阶
嵌入式软件是物联网（IoT）、汽车电子、智能家居等领域的核心技术之一。它涉及硬件与软件的紧密结合，要求开发者不仅会写代码，还要理解底层硬件的工作原理。本文将带你系统了解嵌入式软件的学习路径、核心知识体系及实用资源推荐。 …...
【论文阅读】Adversarial Training Towards Robust Multimedia Recommender System
Adversarial Training Towards Robust Multimedia Recommender System 题目翻译：面向鲁棒多媒体推荐系统的对抗训练 论文链接：点这里 标签：多媒体推荐、对抗训练、推荐系统鲁棒性 摘要 随着多媒体内容在网络上的普及，迫切需要开…...
转换算子和行动算子的区别
转换算子会从一个已经存在的数据集 (RDD)中生成一个新的数据集 (RDD),比如map就是一个转换算子，它通过映射关系从一个RDD生成了一个新的RDD。 行动算子 (actions): 行动算子在进行数据集计算后会给driver程序返回一个值。 转换算子和行动算子最大的区别࿱…...
Selenium的driver.get_url 和 手动输入网址, 并点击的操作，有什么不同？
我在搞爬取的时候，发现有些网站直接用driver.get(url) 跳转到目标特定的网址的时候，会被强制跳转到其他的网址上，但是如果是自己手动，在网址栏那里输入网址，并点回车，却能完成跳转。 这是在使用 Selenium …...
【强化学习】强化学习算法 - 多臂老虎机问题
1、环境/问题介绍 概述：多臂老虎机问题是指：智能体在有限的试验回合 𝑇 内，从 𝐾 台具有未知奖赏分布的“老虎机”中反复选择一个臂（即拉杆），每次拉杆后获得随机奖励，目…...
Spring MVC Controller 方法的返回类型有哪些？
Spring MVC Controller 方法的返回类型非常灵活，可以根据不同的需求返回多种类型的值。Spring MVC 会根据返回值的类型和相关的注解来决定如何处理响应。 以下是一些常见的 Controller 方法返回类型： String: 最常见的类型之一，用于返回逻辑…...
Diamond iO：实用 iO 的第一缕曙光
1. 引言 当前以太坊基金会PSE的Machina iO团队宣布，其已经成功实现了 Diamond iO: A Straightforward Construction of Indistinguishability Obfuscation from Lattices —— 其在2025年2月提出的、结构简单的不可区分混淆（iO）构造…...
Spring MVC中跨域问题处理
在Spring MVC中处理跨域问题可以通过以下几种方式实现，确保前后端能够正常通信： 方法一：使用 CrossOrigin 注解 适用于局部控制跨域配置，直接在Controller或方法上添加注解。 示例代码： RestController CrossOrigin…...
Python爬虫（20）Python爬虫数据存储技巧：二进制格式（Pickle/Parquet）性能优化实战
目录 背景介绍一、二进制存储的核心优势二、Python Pickle：轻量级对象序列化1. 基本介绍2. 代码示例3. 性能与局限性 三、Apache Parquet：列式存储的工业级方案1. 基本介绍2. 代码示例（使用PyArrow库）3. 核心优势 四、性能对比与选…...
MCP系列（一）什么是MCP?
一、MCP 是什么：从 USB-C 到 AI 的「万能接口」哲学 MCP（Model Context Protocol，模型上下文协议） 是Anthropic于2024年11月推出的AI跨系统交互标准，专为解决LLM（大语言模型）的「数字失语症」—…...
使用Java NIO 实现一个socket通信框架
使用Java NIO（非阻塞I/O）实现一个Socket通信框架，可以让你构建高性能的网络应用。NIO提供了Channel、Buffer和Selector等核心组件，支持非阻塞模式下的网络编程。下面是一个简单的例子，展示了如何使用Java NIO创建一个基本的服务器端和客户端进行Socket通信。 1.服务器端 …...
Web前端技术栈：从入门到进阶都需要学什么内容
概述 Web前端技术栈：从入门到进阶都需要学什么内容。 1. jQuery：经典高效的DOM操作利器 作为早期前端开发的“瑞士军刀”，jQuery通过简洁的语法和链式调用大幅简化了DOM操作与事件处理。其核心模块如选择器引擎、动画效果和Ajax交互至今仍值…...
Kepware 连接Modbus TCP/IP
Modbus TCP modbus tcp 是modbus协议的一个变种，基于TCP/IP协议栈在以太网上进行通信。Modbus TCP采用客户端-服务器（Master-Slave）的通信模型。客户端发起请求，服务器响应请求。一个网络中可以有多个客户端和服务器，…...
PyCharm连接WSL2搭建的Python开发环境
目录 一、开启WSL2服务 二、安装Ubuntu 三、安装Anaconda 四、构建Tensorflow_gpu环境 五、PyCharm连接到WSL2环境 使用 PyCharm 连接 WSL2 搭建 Python 开发环境的主要目的是结合 Windows 的易用性和 Linux 的开发优势，提升开发效率和体验。以下是具体原因和优…...
JVM中类加载过程是什么？
引言 在Java程序运行过程中，类的加载是至关重要的环节，它直接关系到程序的执行效率和安全性。类加载不仅仅是简单地将.class文件读取到内存中，而是经历了加载、连接（包含验证、准备和解析）以及初始化等多个复杂步骤&a…...
JVM中对象的存储
引言 在 Java 虚拟机中，对象的内存布局是一个非常基础且重要的概念。每个 Java 对象在内存中都由三个主要部分构成：对象头（Header）、实例数据（Instance Data）和对齐填充（Padding）。…...
精益数据分析（48/126）：UGC商业模式的指标剖析与运营策略
精益数据分析（48/126）：UGC商业模式的指标剖析与运营策略 在创业和数据分析的学习之旅中，探索不同商业模式的运营奥秘是我们不断前行的动力。今天，依旧怀揣着和大家共同进步的期望，深入研读《精益数据分析》…...
SpringBoot优雅参数检查
SpringBoot优雅参数检查 在 Spring Boot 中，参数验证通常基于 JSR-380（Bean Validation 2.0）规范，结合 javax.validation（或 jakarta.validation）和 Hibernate Validator 实现。以下是常用的验证注解及其意…...
（九）PMSM驱动控制学习---分流电阻采样及重构
在电机控制当中，无论是我们的控制或者电机工作情况的检测，都十分依赖于电机三相电流的值， 所以相电流采样再在FOC控制中是一个特别关键的环节。 在前几篇中我们介绍了逆变电路的相关内容，所以在此基础上我们接着说道电流采样。目前…...
医疗人工智能大模型中的关键能力：【中期训练】mid-training
引言 医疗人工智能（AI）领域的快速发展正在重塑医疗保健的未来。从辅助诊断到个性化治疗方案，AI技术已经显示出改变医疗实践的巨大潜力。然而，在将AI技术应用于医疗场景时，我们面临着独特的挑战。医疗数据的复杂性、决策的高风险性以及对可解释性的严格要求，都使得医疗AI…...
Unity垃圾回收（GC）
1.GC的作用：定期释放不再使用的内存空间。 注：C不支持GC，需要手动管理内存，使用new（）申请内存空间，使用完后通过delete（）释放掉，但可能出现忘记释放或者指针…...
什么是跨域，如何解决跨域问题
什么是跨域，如何解决跨域问题 一、什么是跨域 跨域是指浏览器出于安全考虑，限制网页脚本访问不同源（协议、域名、端口）的资源。两个URL的协议、域名或端口任意一个不相同时，就属于不同源，浏览器会阻止脚本…...
JVM的双亲委派模型
引言 Java类加载机制中的双亲委派模型通过层层委托保证了核心类加载器与应用类加载器之间的职责分离和加载安全性，但其单向的委托关系也带来了一些局限性。尤其是在核心类库需要访问或实例化由应用类加载器加载的类时，双亲委派模型无法满足需求…...
ARCGIS PRO DSK 选择坐标系控件（CoordinateSystemsControl ）的调用
在WPF窗体上使用 xml：加入空间命名引用 xmlns:mapping"clr-namespace:ArcGIS.Desktop.Mapping.Controls;assemblyArcGIS.Desktop.Mapping" 在控件区域加入： <mapping:CoordinateSystemsControl x:Name"CoordinateSystemsControl&q…...
一个电平转换电路导致MCU/FPGA通讯波形失真的原因分析
文章目录 前言一、问题描述二、原因分析三、 仿真分析四、 尝试的解决方案总结前言 一、问题描述 一个电平转换电路，800kHz的通讯速率上不去，波形失真，需要分析具体原因。输出波形如下,1码(占空比75%)低于5V，0码(占空比25%)低于4V。，严重失真。 电平转换电路很简单，M…...
不同OS版本中的同一yum源yum list差异排查思路
问题描述： qemu-guest-agent二进制rpm包的yum仓库源和yum源仓库配置文件path_to_yum_conf， 通过yum list --available -c path_to_yum_conf 查询时，不同的OS版本出现了不同的结果 anolis-8无法识别 centos8可以识别 说明： 1 测试…...
Android Studio开发安卓app 设置开机自启
Android Studio开发安卓app 设置开机自启 AndroidManifest.xml增加配置 增加的配置已标记 AndroidManifest.xml完整配置 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/androi…...
全文索引数据库Elasticsearch底层Lucene
Lucene 全文检索的心，天才的想法。 一个高效的，可扩展的，全文检索库。全部用 Java 实现，无须配置。仅支持纯文本文件的索引(Indexing)和搜索(Search)。不负责由其他格式的文件抽取纯文本文件，或从网络中抓取文件的过程…...
互联网大厂Java求职面试：分布式系统中向量数据库与AI应用的融合探索
互联网大厂Java求职面试：分布式系统中向量数据库与AI应用的融合探索 面试开场：技术总监与郑薪苦的“较量” 技术总监（以下简称T）：郑薪苦先生，请简单介绍一下你在分布式系统设计方面的经验。 郑薪苦&…...
游戏引擎学习第262天:绘制多帧性能分析图
回顾并为今天设定阶段 事情开始录制了，大家好，欢迎来到游戏直播节目。我们正在直播完成游戏的开发工作，目前我们正在做性能分析器，它现在已经非常酷了。我们只是在清理一些界面问题，但它能做的事情真的很厉害。我觉得…...
1、RocketMQ 核心架构拆解
1. 为什么要使用消息队列？ 消息队列（MQ）是分布式系统中不可或缺的中间件，主要解决系统间的解耦、异步和削峰填谷问题。 解耦：生产者和消费者通过消息队列通信，彼此无需直接依赖，极大提升系统灵…...
探索 C++ 语言标准演进：从 C++23 到 C++26 的飞跃
引言 C 作为一门历史悠久且广泛应用的编程语言，其每一次标准的演进都备受开发者关注。从早期的 C98 到如今的 C23，再到令人期待的 C26，每一个版本都为开发者带来了新的特性和改进，推动着软件开发的不断进步。本文将深入探讨 C23 …...
ROBOVERSE：面向可扩展和可泛化机器人学习的统一平台、数据集和基准
25年4月来自UC Berkeley、北大、USC、UMich、UIUC、Stanford、CMU、UCLA 和 北京通用 AI 研究院（BIGAI）的论文“ROBOVERSE: Towards a Unified Platform, Dataset and Benchmark for Scalable and Generalizable Robot Learning”。 数据扩展和标准化评…...
【Bootstrap V4系列】学习入门教程之 组件-轮播（Carousel）高级用法
【Bootstrap V4系列】学习入门教程之 组件-轮播（Carousel）高级用法 轮播（Carousel）高级用法2.5 Crossfade （淡入淡出）2.6 Individual .carousel-item interval （单个轮播项目间隔）2.…...
LangChain4j简介
LangChain4j 是什么？ The goal of LangChain4j is to simplify integrating LLMs into Java applications. LangChain4j 的目标是简化将 LLMs 集成到 Java 应用程序中。 提供如下能力： ● 统一的 API： LLM 提供商（如 OpenAI 或 Go…...
Git 撤销已commit但未push的文件
基础知识：HEAD^ 即上个版本, HEAD~2 即上上个版本, 依此类推… 查看commit日志 git log撤销commit，保留git add git reset --soft HEAD^ #【常用于：commit成功，push失败时的代码恢复】保留工作空间改动代码，撤销com…...