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

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

news 2025/12/14 12:18:11

目录

一、业务需求

二、实现思路

三、实现过程

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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/11/25 7:21:34

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/12/13 2:30:09

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/12/10 23:18:38

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/12/13 15:40:41

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/12/9 1:23:41

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/12/12 12:28:48