当前位置： 首页 > news >正文

Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）

news 2026/2/8 6:55:07

目录

一、业务需求

二、实现思路

三、实现过程

1、基础页面

2、图片大小调整

3、图片位置调整

4、鼠标控制切换

5、添加过渡

四、完整代码

一、业务需求

默认显示基础图片；

当鼠标移入，使用九宫格效果展示图片；

当鼠标离开，使用非九宫格效果展示图片；

 【鼠标移入，九宫格展示效果】

【鼠标离开，非九宫格展示效果（默认效果）】

【视频效果】

图片九宫格与非九宫格动态切换效果

二、实现思路

  • 准备一个Grid布局，添加 3 * 3 = 9 个Grid元素；
  • 每个Grid元素的背景均设为该目标图片；
  • 调整图片大小，设置每个背景图的宽高为单个Grid元素宽高的三倍；
  • 调整图片位置，设置每个Grid元素显示对应位置的图片内容，能够拼成一个完整的图片；
  • 通过对Grid元素间隙的控制，在视觉上实现九宫格和非九宫格的切换效果；

三、实现过程

1、基础页面

（1）HTML布局

分析需求可知，

  • 布局内容非常简单，只需要1个Grid容器【.grid-container】和9个Grid元素【.grid-item】；
  • 可以再给Grid容器添加一个父盒子【.container】，使图片的九宫格在父盒子中居中显示；
<body><div class="container"><div class="grid-container"><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div></div></div>
</body>

（2）CSS样式

  • 设置【.container】元素为Flex布局，是子元素【.grid-container】水平垂直居中显示（在.container元素中水平垂直居中显示）；
  • Grid容器【.grid-container】中的9个Grid元素【.grid-item】，呈现【3行3列】的排列方式，并设置Grid元素的间距为10px；
  • 给每个Grid元素【.grid-item】设置背景为目标图片；
<style>.container {/* 设为Flex布局 */display: flex;/* 设置子元素水平居中 */justify-content: center;/* 设置子元素垂直居中 */align-items: center;/* 设置宽度为可视窗口宽度 */width: 100vw;/* 设置高度为可视窗口高度的一半 */height: 50vh;}.grid-container {/* 设为grid布局 */display: grid;/* 子元素分为三列，列宽为100px */grid-template-columns: repeat(3, 100px);/* 子元素分为两行，行高为80px */grid-template-rows: repeat(3, 80px);/* 子元素间隔为10px */gap: 10px;}.grid-item {background-image: url("D:\\test\\girl.png");background-repeat: no-repeat;/* 先设置背景图展示出来 */background-size: cover;}
</style>

（3）现有效果

2、图片大小调整

  • 现有效果仅仅只是，给每个盒子设置了相同的图片作为背景图，显然是不符合需求的；
  • 目标效果是用“一张图片”，占满九个盒子；
  • 那一张图片的宽高，就是整个9宫格【.grid-container】的宽高（除去间隙）；
  • 所以背景图的宽度和高度，是单个盒子【.grid-item】宽度和高度的三倍；
.grid-item {background-image: url("D:\\test\\girl.png");background-repeat: no-repeat;/* 先设置背景图展示出来 *//* background-size: cover; *//* 修改背景图宽高为单个盒子的3倍 */background-size: 300%;
}

3、图片位置调整

调整了图片大下后，图片的位置（除了第一个），其他的图片显示的位置并不符合预期；

但可以知道的是，一个盒子的背景图默认是从图片的（0， 0）位置开始渲染的；

所以，需要调整其余背景图片的位置；

  • 第 1 张图片不需要设置位置偏移；
  • 第 2 张图片需要向左偏移一个盒子的宽度（-100px）；
  • 第 3 张图片需要向左偏移两个盒子的宽度（-200px）；
  • 第 4 张图片不需要向左偏移，但需要向上偏移一个盒子的高度（-80px）；
  • ......（以此类推）
  • 第 9 张图片需要向左偏移两个盒子的宽度（-200px），还需要向上偏移两个盒子的高度（-160px）；

这里给出两种不同的解决方式，分别使用CSS和JavaScript来背景图位置的偏移量来实现效果；

（1）使用CSS实现

简单粗暴的方式，分别给每个盒子设置自己的背景位置；

<style>.......grid-item:nth-child(1){background-position: 0 0;}.grid-item:nth-child(2){background-position: -100px 0;}.grid-item:nth-child(3){background-position: -200px 0;}.grid-item:nth-child(4){background-position: 0 -80px;}.grid-item:nth-child(5){background-position: -100px -80px;}.grid-item:nth-child(6){background-position: -200px -80px;}.grid-item:nth-child(7){background-position: 0 -160px;}.grid-item:nth-child(8){background-position: -100px -160px;}.grid-item:nth-child(9){background-position: -200px -160px;}
</style>

（2）使用JavaScript实现

使用JavaScript也可以达到同样的效果，两者选其一即可；

  • 通过querySelectorAll()方法获取所有的【.grid-item】元素，得到数组 itemList，其中有item[0]~item[8]；循环遍历该数组，计算每个元素的行号和列号；
  • 计算每个元素的行号r：计算  i  /  3 ，再向下取整，得到 0，1，2；
  • 计算每个元素的列号c：计算  i  %  3 ，得到 0，1，2；
  • 行号（ r ） * 元素高度（itemHeight），得到每一行的向上偏移量（取反）；
  • 列号（ c ） * 元素宽度（itemWidth），得到每一行的向左偏移量（取反）；
  • 再将计算结果直接赋值给该元素即可（别忘了加 'px' ）；

注意：

  • 这里需要修改一些样式，应用CSS中的变量，需要在【body】中声明变量，在【 .grid-container】中使用CSS变量；
  • 方便在JavaScript中获取定义好的变量值，设置每个元素的偏移位置；

【需要修改的CSS代码】

<style>......body {/* 定义CSS变量 *//* 定义子元素的宽度 */--item-width: 100px;/* 定义子元素的高度 */--item-height: 80px;/* 定义元素间隔 */--item-gap: 10px;}.......grid-container {/* 设为grid布局 */display: grid;/* 子元素分为三列，列宽为100px */grid-template-columns: repeat(3, var(--item-width));/* 子元素分为两行，行高为80px */grid-template-rows: repeat(3, var(--item-height));/* 子元素间隔为10px */gap: var(--item-gap);}......
</style>

【添加的JavaScript代码】 

<script>// 获取元素var body = document.querySelector("body");var container = document.querySelector(".grid-container");var itemList = document.querySelectorAll(".grid-item");// 获取CSS变量(元素的宽度、元素的高度)var itemWidth = parseInt(getComputedStyle(container).getPropertyValue('--item-width'));var itemHeight = parseInt(getComputedStyle(container).getPropertyValue('--item-height'));// 计算偏移量for (let i = 0; i < itemList.length; i++) {// 计算是元素位置，// 元素的行号(从0开始)const r = Math.floor(i / 3);// console.log(r);// 元素的列号(从0开始)const c = i % 3;// console.log(c);// 计算元素的偏移量const dx = -(c * itemWidth) + 'px';const dy = -(r * itemHeight) + 'px';console.log((i + 1), dx, dy);// 设置元素的偏移itemList[i].style.backgroundPosition = `${dx} ${dy}`;}
</script>

【实现的效果】 

4、鼠标控制切换

分析需求可知：

  • 图片九宫格与非九宫格的展示，现在仅仅就变成了调整元素间隙的问题；
  • 九宫格展示，元素间隙【--item-gap: 10px;】
  • 非九宫格展示，元素间隙【--item-gap: 0;】
  • 给【.grid-container】盒子注册鼠标移入事件；当鼠标进入，设置元素间隙为10px（值可以自行定义），使用九宫格效果展示；
  • 给【.grid-container】盒子注册鼠标离开事件；当鼠标离开，设置元素间隙为0，使用非九宫格效果展示；

注意：

  • 这里需要修改CSS，调整默认的元素间距为0；
body {/* 定义CSS变量 */....../* 定义元素间隔 初始为0 */--item-gap: 0;
}

【初始效果】

【添加下列JavaScript代码】 

<script>// 获取元素var body = document.querySelector("body");var container = document.querySelector(".grid-container");......// 鼠标进入,显示九宫格container.addEventListener('mouseenter', function () {// 修改CSS变量body.style.setProperty('--item-gap', '10px');})// 鼠标离开,不显示九宫格container.addEventListener('mouseleave', function () {// 修改CSS变量body.style.setProperty('--item-gap', '0');})
</script>

到这一步，效果基本上是可以实现了；

5、添加过渡

现有的切换效果生硬的，添加过度效果进行优化；

.grid-container {....../* 添加过渡 */transition: 0.6s;
}

四、完整代码

【使用CSS控制图片位置】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片九宫格切换展示效果</title><style>* {margin: 0;padding: 0;}body {/* 定义CSS变量 *//* 定义子元素的宽度 */--item-width: 100px;/* 定义子元素的高度 */--item-height: 80px;/* 定义元素间隔 初始值*/--item-gap: 0;}.container {/* 设为Flex布局 */display: flex;/* 设置子元素水平居中 */justify-content: center;/* 设置子元素垂直居中 */align-items: center;/* 设置宽度为可视窗口宽度 */width: 100vw;/* 设置高度为可视窗口高度的一半 */height: 50vh;}.grid-container {/* 设为grid布局 */display: grid;/* 子元素分为三列，列宽为100px */grid-template-columns: repeat(3, var(--item-width));/* 子元素分为两行，行高为80px */grid-template-rows: repeat(3, var(--item-height));/* 子元素间隔为10px */gap: var(--item-gap);/* 添加过渡 */transition: 0.6s;border-radius: 6px;box-shadow: 0 0 6px 1px #999;}.grid-item {background-image: url("D:\\test\\girl.png");background-repeat: no-repeat;/* 先设置背景图展示出来 *//* background-size: cover; *//* 修改背景图宽高为单个盒子的3倍 */background-size: 300%;}.grid-item:nth-child(1) {background-position: 0 0;}.grid-item:nth-child(2) {background-position: calc(-1* var(--item-width)) 0;}.grid-item:nth-child(3) {background-position: calc(-2* var(--item-width)) 0;}.grid-item:nth-child(4) {background-position: 0 calc(-1* var(--item-height));}.grid-item:nth-child(5) {background-position: calc(-1* var(--item-width)) calc(-1* var(--item-height));}.grid-item:nth-child(6) {background-position: calc(-2* var(--item-width)) calc(-1* var(--item-height));}.grid-item:nth-child(7) {background-position: 0 calc(-2* var(--item-height));}.grid-item:nth-child(8) {background-position: calc(-1* var(--item-width)) calc(-2* var(--item-height));}.grid-item:nth-child(9) {background-position: calc(-2* var(--item-width)) calc(-2* var(--item-height));}</style>
</head><body><div class="container"><div class="grid-container"><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div></div></div>
</body>
<script>// 获取元素var body = document.querySelector("body");var container = document.querySelector(".grid-container");var itemList = document.querySelectorAll(".grid-item");// 鼠标进入,显示九宫格container.addEventListener('mouseenter', function () {// 修改CSS变量body.style.setProperty('--item-gap', '10px');this.style.boxShadow = "none";this.style.borderRadius = "0";itemList.forEach(el => {el.style.boxShadow = "0 0 6px 1px #999";el.style.borderRadius = "6px";});})// 鼠标离开,不显示九宫格container.addEventListener('mouseleave', function () {// 修改CSS变量body.style.setProperty('--item-gap', '0');this.style.boxShadow = "0 0 6px 1px #999";this.style.borderRadius = "6px";itemList.forEach(el => {el.style.boxShadow = "none";el.style.borderRadius = "0";});})
</script></html>

【使用JavaScript控制图片位置】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片九宫格切换展示效果</title><style>* {margin: 0;padding: 0;}body {/* 定义CSS变量 *//* 定义子元素的宽度 */--item-width: 100px;/* 定义子元素的高度 */--item-height: 80px;/* 定义元素间隔 初始值 */--item-gap: 0;}.container {/* 设为Flex布局 */display: flex;/* 设置子元素水平居中 */justify-content: center;/* 设置子元素垂直居中 */align-items: center;/* 设置宽度为可视窗口宽度 */width: 100vw;/* 设置高度为可视窗口高度的一半 */height: 50vh;}.grid-container {/* 设为grid布局 */display: grid;/* 子元素分为三列，列宽为100px */grid-template-columns: repeat(3, var(--item-width));/* 子元素分为两行，行高为80px */grid-template-rows: repeat(3, var(--item-height));/* 子元素间隔为10px */gap: var(--item-gap);/* 添加过渡 */transition: 0.6s;border-radius: 6px;box-shadow: 0 0 6px 1px #999;}.grid-item {background-image: url("D:\\test\\girl.png");background-repeat: no-repeat;/* 先设置背景图展示出来 *//* background-size: cover; *//* 修改背景图宽高为单个盒子的3倍 */background-size: 300%;}</style>
</head><body><div class="container"><div class="grid-container"><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div></div></div>
</body>
<script>// 获取元素var body = document.querySelector("body");var container = document.querySelector(".grid-container");var itemList = document.querySelectorAll(".grid-item");// 获取CSS变量(元素的宽度、元素的高度)var itemWidth = parseInt(getComputedStyle(container).getPropertyValue('--item-width'));var itemHeight = parseInt(getComputedStyle(container).getPropertyValue('--item-height'));// 获取元素间隙// var itemGap = parseInt(getComputedStyle(container).getPropertyValue('--item-gap'));// 计算偏移量for (let i = 0; i < itemList.length; i++) {// 计算是元素位置，// 元素的行号(从0开始)const r = Math.floor(i / 3);// console.log(r);// 元素的列号(从0开始)const c = i % 3;// console.log(c);// 计算元素的偏移量const dx = -(c * itemWidth) + 'px';const dy = -(r * itemHeight) + 'px';console.log((i + 1), dx, dy);// 设置元素的偏移itemList[i].style.backgroundPosition = `${dx} ${dy}`;}// 鼠标进入,显示九宫格container.addEventListener('mouseenter', function () {// 修改CSS变量body.style.setProperty('--item-gap', '10px');this.style.boxShadow = "none";this.style.borderRadius = "0";itemList.forEach(el => {el.style.boxShadow = "0 0 6px 1px #999";el.style.borderRadius = "6px";});})// 鼠标离开,不显示九宫格container.addEventListener('mouseleave', function () {// 修改CSS变量body.style.setProperty('--item-gap', '0');this.style.boxShadow = "0 0 6px 1px #999";this.style.borderRadius = "6px";itemList.forEach(el => {el.style.boxShadow = "none";el.style.borderRadius = "0";});})
</script></html>

 =========================================================================

每天进步一点点~！

期待你更好的实现方法~~！

相关文章：

Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）

目录 一、业务需求 二、实现思路 三、实现过程 1、基础页面 2、图片大小调整 3、图片位置调整 4、鼠标控制切换 5、添加过渡 四、完整代码 一、业务需求 默认显示基础图片&#xff1b; 当鼠标移入&#xff0c;使用九宫格效果展示图片&#xff1b; 当鼠标离开&#…...

编程日记 2024/7/21 11:02:19

价格较低，功能最强？OpenAI 推出 GPT-4o mini，一个更小、更便宜的人工智能模型

OpenAI美东时间周四推出“GPT-4o mini”&#xff0c;入局“小而精”AI模型竞争&#xff0c;称这款新模型是“功能最强、成本偏低的模型”&#xff0c;计划今后整合图像、视频、音频到这个模型中。 OpenAI表示&#xff0c;GPT-4o mini 相较于 OpenAI 目前最先进的 AI 模型更加便…...

编程日记 2024/7/21 11:00:17

【学习笔记】无人机系统（UAS）的连接、识别和跟踪（八）-无人机探测与避让（DAA）机制

目录 引言 5.6 探测与避让&#xff08;DAA&#xff09;机制 5.6.1 基于PC5的探测与避让&#xff08;DAA&#xff09;机制 引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Airc…...

编程日记 2024/7/21 10:58:16

网络结构-组件-AI（九）

深度学习网络组件 RNN公式讲解计算示意图讲解 CNN计算示意 Normalization(归一化层)Normalization常见两种方式 Dropout层 RNN 循环神经网络&#xff08;recurrent neural network&#xff09; 主要思想&#xff1a; 即将整个序列划分成多个时间步&#xff0c;将每一个时间步的…...

编程日记 2024/7/21 10:54:12

弹性网络回归（Elastic Net Regression）

弹性网络回归&#xff08;Elastic Net Regression&#xff09;的详细理论知识推导 理论背景 弹性网络回归结合了岭回归&#xff08;Ridge Regression&#xff09;和Lasso回归&#xff08;Lasso Regression&#xff09;的优点&#xff0c;通过引入两个正则化参数来实现特征选择…...

编程日记 2024/7/21 10:52:11

【深度学习】FaceChain-SuDe，免训练，AI换脸

https://arxiv.org/abs/2403.06775 FaceChain-SuDe: Building Derived Class to Inherit Category Attributes for One-shot Subject-Driven Generation 摘要 最近&#xff0c;基于主体驱动的生成技术由于其个性化文本到图像生成的能力&#xff0c;受到了广泛关注。典型的研…...

编程日记 2024/7/21 10:51:09

Uniapp鸿蒙项目实战

Uniapp鸿蒙项目实战 24.7.6 Dcloud发布了uniapp兼容鸿蒙的文档&#xff1a;Uniapp开发鸿蒙应用 在实际使用中发现一些问题&#xff0c;开贴记录一下 设备准备 windows电脑准备&#xff08;家庭版不行&#xff0c;教育版、企业版、专业版也可以&#xff0c;不像uniapp说的只有…...

编程日记 2024/7/21 10:48:04

计算机三级嵌入式笔记（一）—— 嵌入式系统概论

目录 考点1 嵌入式系统 考点2 嵌入式系统的组成与分类 考点3 嵌入式系统的分类与发展 考点4 SOC芯片 考点5 数字&#xff08;电子&#xff09;文本 考点6 数字图像 考点7 数字音频与数字视频 考点8 数字通信 考点9 计算机网络 考点10 互联网 考纲&#xff08;2023&am…...

编程日记 2024/7/21 10:46:01

react Jsx基础概念和本质

什么是jsx jsx是JavaScript和XML(HTML)的缩写&#xff0c;表示在js代码中编写HTML模板结构&#xff0c;它是react中编写UI模板的方式 const message this is message function App(){return (<div><h1>this is title</h1>{message}</div>) } jsx优…...

编程日记 2024/7/21 10:45:01

【深大计算机系统（2）】实验一 实验环境配置与使用 附常用指令

目录 一、 实验目标&#xff1a; 二、实验环境与工件&#xff1a; 三、实验内容与步骤 1. 学习并熟悉Linux基本操作&#xff0c;按照要求创建用户。&#xff08;30分&#xff09; 2.新建用户主目录下创建子目录&#xff1a;gdbdebug&#xff0c;并进入gdbdebug子目录。将过程和…...

编程日记 2024/7/21 10:41:58

目标检测经典模型之YOLOV5-detect.py源码解析（持续更新）

detect文件框架 一、导入模块包二、定义run函数1. 归一化操作代码解析uint8精度转换归一化 2. 扩展维度为什么扩展维度&#xff1f;代码解释 3. 对检测结果类别计数检查是否有检测结果统计每个类别的出现次数构建描述性字符串 三、定义命令行参数四、主函数 本帖是YOLOV5推理部…...

编程日记 2024/7/21 10:36:50

PF4J+SpringBoot

plugin-common pom.xml相关配置 <groupId>pub.qingyun</groupId> <artifactId>plugin-common</artifactId> <version>0.0.1-SNAPSHOT</version> <description>插件配置类</description><dependency><groupId>or…...

编程日记 2024/7/21 10:33:47

设计模式11-原型模式

设计模式11-原型模式 写在前面对象创建模式典型模式原型模式动机结构代码推导应用特点要点总结 原型模式与工厂方法模式对比工厂方法模式原型模式什么时候用什么模式 写在前面 对象创建模式 通过对象创建模式绕开动态内存分配来避免创建过程中所导致的耦合过紧的问题。从而支…...

编程日记 2024/7/21 10:30:45

Tomcat长连接源码解析

长连接: 客户端发送Http请求至服务端&#xff0c;请求发送完之后socket连接不断开&#xff0c;可以继续接收下一个Http请求并且解析返回。接手并解析这些Http请求的时候socket连接不断开&#xff0c;这种过程被称为长连接。 需要注意的点就在于&#xff0c;在满足什么条件的情况…...

编程日记 2024/7/21 10:29:44

C++编程：实现一个跨平台安全的定时器Timer模块

文章目录 0. 概要1. 设计目标2. SafeTimer 类的实现2.1 头文件 safe_timer.h源文件 safe_timer.cpp 3. 工作流程图4. 单元测试 0. 概要 对于C应用编程&#xff0c;定时器模块是一个至关重要的组件。为了确保系统的可靠性和功能安全&#xff0c;我们需要设计一个高效、稳定的定…...

编程日记 2024/7/21 10:26:41

PyTorch的自动微分模块【含梯度基本数学原理详解】

文章目录 1、简介1.1、基本概念1.2、基本原理1.2.1、自动微分1.2.2、梯度1.2.3、梯度求导1.2.4、梯度下降法1.2.5、张量梯度举例 1.3、Autograd的高级功能 2、梯度基本计算2.1、单标量梯度2.2、单向量梯度的计算2.3、多标量梯度计算2.4、多向量梯度计算 3、控制梯度计算4、累计…...

编程日记 2024/7/21 10:22:37

AI 绘画｜Midjourney设计Logo提示词

你是否已经看过许多别人分享的 MJ 咒语&#xff0c;却仍无法按照自己的想法画图&#xff1f;通过学习 MJ 的提示词逻辑后&#xff0c;你将能够更好地理解并创作自己的“咒语”。本文将详细拆解使用 MJ 设计 Logo 的逻辑&#xff0c;让你在阅读后即可轻松上手&#xff0c;制作出…...

编程日记 2024/7/21 10:18:34

LeNet实验 四分类 与 四分类变为多个二分类

目录 1. 划分二分类 2. 训练独立的二分类模型 3. 二分类预测结果代码 4. 二分类预测结果 5 改进训练模型 6 优化后 预测结果代码 7 优化后预测结果 8 训练四分类模型 9 预测结果代码 10 四分类结果识别 1. 划分二分类 可以根据不同的类别进行多个划分&#xff0c;以…...

编程日记 2024/7/21 10:17:33

【BUG】已解决：java.lang.reflect.InvocationTargetException

已解决&#xff1a;java.lang.reflect.InvocationTargetException 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉城市开发…...

编程日记 2024/7/21 10:12:28

配置kali 的apt命令在线安装包的源为国内源

目录 一、安装VMware Tools 二、配置apt国内源 一、安装VMware Tools 点击安装 VMware Tools 后&#xff0c;会加载一个虚拟光驱&#xff0c;里面包含 VMware Tools 的安装包 鼠标右键单击 VMware Tools 的安装包&#xff0c;点击复制到 点击 主目录&#xff0c;再点击选择…...

编程日记 2024/7/21 10:07:22

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/6 1:29:28

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46