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

【JS案例】JS实现图片放大镜功能

news 文章来源：https://blog.csdn.net/G_ing/article/details/132583089 2024/9/20 10:37:24

JS案例·图片放大镜

🌟效果展示

🌟HTML结构

🌟CSS样式

🌟实现思路

🌟具体实现

1.初始化数据图片

2.获取所需DOM元素

3.初始化页面

初始化缩略图

绑定事件

🌟完整代码

🌟写在最后

🌟效果展示

🌟HTML结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><!--最外层容器 --><div class="container"><!-- 左侧原图 --><div class="left-img"><!-- 遮罩层 --><div class="mask"></div></div><!-- 右侧放大图片 --><div class="right-img"></div><!-- 缩略图集合 --><div class="img-list-wrapper"><ul class="img-list"><li></li></ul></div></div><script src="./index.js"></script>
</body>
</html>

🌟CSS样式

* {margin: 0;padding: 0;list-style: none;
}.container {width: 1000px;height: 600px;margin: 50px auto;font-size: 0;
}.left-img {width: 490px;height: 510px;margin-right: 16px;border: 1px solid #eee;display: inline-block;/* 图片 */background-image: url(./images/imgA_2.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;/* 遮罩层相对我进行定位 */position: relative;
}
.mask {width: 230px;height: 230px;background-image: url(./images/bg.png);position: absolute;top: 0;left: 0;/* opacity: 0; */
}
.right-img {width: 490px;height: 510px;border: 1px solid #eee;display: inline-block;background-image: url(./images/imgA_3.jpg);background-repeat: no-repeat;/* opacity: 0; */
}.img-list-wrapper {width: 490px;text-align: center;margin-top: 10px;
}
.img-list {display: inline-block;
}
.img-list li {display: inline-block;width: 60px;height: 60px;margin: 0 5px;cursor: pointer;background-image: url(./images/imgA_1.jpg);background-repeat: no-repeat;border: 2px solid #000;/* border: 1px solid #eee; */
}

🌟实现思路

在敲完上面HTML文件和CSS文件后可以看到下图效果(图片素材及完整代码文末可下载)：

可以看到整体分为四块：

1. 阴影区域：其实是一张很小的像素图铺满元素形成，后续跟随鼠标移动，所选区域在右侧高清展示。

2.图片大图：就是展示的图片。

3.缩略图列表：点击切换图片。

4.高清大图展示区域。

在项目中②和③一般可以用同一种图，④会使用一张高清图。我们这里是使用三张图片来开发，缩略图，普通展示图，高清图。

因为①和④是鼠标移入才出现，所以这里给.mask和.right-img加上opacity: 0;属性如下：

接下来我们需要做的就是在鼠标移入和移出时在右侧展示与隐藏高清图，从而实现图片放大镜效果。

🌟具体实现

1.初始化数据图片

这里用的就是本地图片，所以先初始化数据图片，三种大小对应缩略图，展示图，高清图：

// 初始化数据图片
var imgs = {// 小图small: ['imgA_1.jpg', 'imgB_1.jpg', 'imgC_1.jpg'],// 中图middle: ['imgA_2.jpg', 'imgB_2.jpg', 'imgC_2.jpg'],// 大图large: ['imgA_3.jpg', 'imgB_3.jpg', 'imgC_3.jpg']
}

2.获取所需DOM元素

因为需要频繁操作DOM元素，这里简单封装一个获取DOM元素方法：

// 单一元素
function $(selector) {return document.querySelector(selector);
}// 多个元素
function $$(selector) {return document.querySelectorAll(selector);
}

接下来获取需要用到的元素：

3.初始化页面

初始化缩略图

初始化所有缩略图，及③区域的缩略图列表。拿到缩略图值拼接字符串，将<li></li>插入页面，并默认选中第一张缩略图：

// 初始化所有缩略图let str = '';for(var i=0; i<imgs.small.length; i++) {str += '<li style="background-image: url(./images/'+ imgs.small[i] +');"></li>'}smallImg.innerHTML = str
// 默认选中第一个缩略图
$('.img-list li').style.border = '2px solid #000';

绑定事件

该效果中一共有两种事件，一个是点击缩略图，另一个是鼠标移入移出。

点击缩略图切换展示图片

smallImg.onclick = function (e) {// 判断我点击的元素是li元素if (e.target.tagName == 'LI') {// 让所有li元素取消borderlet lis = $$('li');for (let i = 0; i < lis.length; i++) {lis[i].style.border = 'none';}// 让选中的li元素添加bordere.target.style.border = '2px solid #000';// 点击缩略图后，原图和大图也需要跟着变换，// 点的是第几个元素, 获取元素索引// [1,2,3].indexOf(3) == 2let index = [].indexOf.call(lis, e.target);midImg.style.backgroundImage = 'url(./images/' + imgs.middle[index] + ')';largeImg.style.backgroundImage = 'url(./images/' + imgs.large[index] + ')';}
}

移入移出事件

这里需要计算遮罩层离边框的距离，可得到的距离有：

绿色：边框距离浏览器左边的距离

红色：鼠标距离浏览器左边的距离

黄色：遮罩层一半的距离

通过这几个值就可求出遮罩层距离边框的距离left了，同理top值一样的求法

鼠标移入

midImg.onmousemove = function (e) {// 让遮罩层和大图展示mask.style.opacity = 1;largeImg.style.opacity = 1;// 根据鼠标位置计算遮罩层的位置let left = e.clientX - midImg.offsetLeft - mask.offsetWidth / 2;// 同理let top = e.clientY - midImg.offsetTop - mask.offsetHeight / 2;// 边界条件if (left <= 0) {left = 0;}if (top <= 0) {top = 0;}if (left >= midImg.offsetWidth - mask.offsetWidth) {left = midImg.offsetWidth - mask.offsetWidth}if (top >= midImg.offsetHeight - mask.offsetHeight) {top = midImg.offsetHeight - mask.offsetHeight}// 根据top和left调整mask的位置mask.style.left = left + 'px';mask.style.top = top + 'px';// 根据top 和 left，修改大图的位置，background-position-xlargeImg.style.backgroundPositionX = -left + 'px';largeImg.style.backgroundPositionY = -top + 'px';}

鼠标移出

  midImg.onmouseleave = function (e) {// 让遮罩层和大图消失mask.style.opacity = 0;largeImg.style.opacity = 0;}

🌟完整代码

最后在把js代码进行整理与二次封装，完整代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><!--最外层容器 --><div class="container"><!-- 左侧原图 --><div class="left-img"><!-- 遮罩层 --><div class="mask"></div></div><!-- 右侧放大图片 --><div class="right-img"></div><!-- 缩略图集合 --><div class="img-list-wrapper"><ul class="img-list"></ul></div></div><script src="./index.js"></script>
</body>
</html>

index.css

* {margin: 0;padding: 0;list-style: none;
}.container {width: 1000px;height: 600px;margin: 50px auto;font-size: 0;
}.left-img {width: 490px;height: 510px;margin-right: 16px;border: 1px solid #eee;display: inline-block;/* 图片 */background-image: url(./images/imgA_2.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;/* 遮罩层相对我进行定位 */position: relative;
}
.mask {width: 230px;height: 230px;background-image: url(./images/bg.png);position: absolute;top: 0;left: 0;opacity: 0;
}
.right-img {width: 490px;height: 510px;border: 1px solid #eee;display: inline-block;background-image: url(./images/imgA_3.jpg);background-repeat: no-repeat;opacity: 0;
}.img-list-wrapper {width: 490px;text-align: center;margin-top: 10px;
}
.img-list {display: inline-block;
}
.img-list li {display: inline-block;width: 60px;height: 60px;margin: 0 5px;cursor: pointer;background-image: url(./images/imgA_1.jpg);background-repeat: no-repeat;/* border: 2px solid #000; */border: 1px solid #eee;
}

index.js

// 封装一个获取DOM元素的方法// 单一元素
function $(selector) {return document.querySelector(selector);
}// 多个元素
function $$(selector) {return document.querySelectorAll(selector);
}// 初始化数据图片
let imgs = {// 小图small: ['imgA_1.jpg', 'imgB_1.jpg', 'imgC_1.jpg'],// 中图middle: ['imgA_2.jpg', 'imgB_2.jpg', 'imgC_2.jpg'],// 大图large: ['imgA_3.jpg', 'imgB_3.jpg', 'imgC_3.jpg']
}// 获取一些将要使用的dom元素
let container = $('.container');
let largeImg = $('.right-img');
let midImg = $('.left-img');
let smallImg = $('.img-list');
let mask = $('.mask');// 两大类事件类型， 点击， 鼠标移入移出
// 1. 点击事件, 事件委托
smallImg.onclick = function (e) {// 判断我点击的元素是li元素if (e.target.tagName == 'LI') {// 让所有li元素取消borderlet lis = $$('li');for (let i = 0; i < lis.length; i++) {lis[i].style.border = 'none';}// 让选中的li元素添加bordere.target.style.border = '2px solid #000';// 点击缩略图后，原图和大图也需要跟着变换，// 点的是第几个元素, 获取元素索引// [1,2,3].indexOf(3) == 2let index = [].indexOf.call(lis, e.target);midImg.style.backgroundImage = 'url(./images/' + imgs.middle[index] + ')';largeImg.style.backgroundImage = 'url(./images/' + imgs.large[index] + ')';}
}// 函数封装，一键启动
// 函数本质：若干步骤的集合
// 初始化页面函数
function initPage() {var str = '';for (let i = 0; i < imgs.small.length; i++) {str += '<li style="background-image: url(./images/' + imgs.small[i] + ');"></li>'}smallImg.innerHTML = str;// 2. 默认选中第一个缩略图$('.img-list li').style.border = '2px solid #000';
}// 绑定事件
function bindEvent() {midImg.onmousemove = function (e) {// 让遮罩层和大图展示mask.style.opacity = 1;largeImg.style.opacity = 1;// 根据鼠标位置计算遮罩层的位置let left = e.clientX - midImg.offsetLeft - mask.offsetWidth / 2;// 同理let top = e.clientY - midImg.offsetTop - mask.offsetHeight / 2;// 边界条件if (left <= 0) {left = 0;}if (top <= 0) {top = 0;}if (left >= midImg.offsetWidth - mask.offsetWidth) {left = midImg.offsetWidth - mask.offsetWidth}if (top >= midImg.offsetHeight - mask.offsetHeight) {top = midImg.offsetHeight - mask.offsetHeight}// 根据top和left调整mask的位置mask.style.left = left + 'px';mask.style.top = top + 'px';// 根据top 和 left，修改大图的位置，background-position-xlargeImg.style.backgroundPositionX = -left + 'px';largeImg.style.backgroundPositionY = -top + 'px';}// 2. 移出midImg.onmouseleave = function (e) {// 让遮罩层和大图消失mask.style.opacity = 0;largeImg.style.opacity = 0;}
}// 一键启动，执行一个函数
function main() {initPage();bindEvent();
}main();

🌟写在最后

本专栏将持续更新原生JS案例，提供一些工作中也能用上的一些小案例，详细讲解分析，提升JS开发水平与开发思路的积累，如果文中出现有瑕疵的地方各位通过评论或者私信联系我，我们一起进步，有兴趣的伙伴可以订阅一下：点击关注JS经典案例专栏

【JS案例】JS实现图片放大镜功能

JS案例图片放大镜 🌟效果展示 🌟HTML结构 🌟CSS样式 🌟实现思路 🌟具体实现 1.初始化数据图片 2.获取所需DOM元素 3.初始化页面初始化缩略图绑定事件 🌟完整代码 🌟写在最后 &…...

编程日记 2023/8/31 2:01:20

linux centos7 bash中字符串反向输出

给定一个字符串，如何反向(倒序)输出？ 字符串反转的方法：a.对各个字符位置进行循环调换（从原字符串左边取出放在新字符串的右边；从原字符串右边取出放在新字符串的左边）。b.对各个字符由水平排列转为垂直排…...

编程日记 2023/8/31 2:00:19

git rebase和merge区别

一、概述 merge和rebase 标题上的两个命令：merge和rebase都是用来合并分支的。这里不解释rebase命令，以及两个命令的原理，详细解释参考这里。下面的内容主要说的是两者在实际操作中的区别。 1.1 什么是分支分支就是便于多人在同一项目…...

编程日记 2023/8/31 1:58:11

Vue插槽实现商品列表-编辑渲染

商品列表文章目录商品列表核心步骤创建组件 1. MyTag组件详细步骤双击显示，自动聚焦失去焦点，隐藏输入框回显标签信息回车修修改内容，同时隐藏输入框 MyTable组件详细步骤1-动态的设置整个表格的数据 ： props2-实现自定义结构-插…...

编程日记 2023/8/31 1:57:10

Vue开发之父子组件

创建父子组建，分三步。一是创建文件，二是引入组建，三是组件间通信。在components目录下新建sub文件夹，用于存放一下可以复用的子组件。比如新建一个SubCon.vue组件 <template><div class"first-app">{{ ms…...

编程日记 2023/8/31 1:56:09

fastadmin think-queue supervisor配置

起因是微信支付回调需要同时做发货处理，但是发货接口不能影响,需要队列进行异步处理1. 1.fastadmin 后台购买queue插件(基于think-queue消息队列) 2.代码 2.1 添加文件：application---->extra--->queue.php 内容：我这里用的数据库做…...

编程日记 2023/8/31 1:55:08

STM32 进不了main 函数

1. 我用的是STM32L151C8T6 的芯片，在github 上找了个别人的例程，拿来当模板改，由于他用的是HSE 外部晶振，我用的是内部晶振HSI，所以需要改系统时钟，改完后debug， 一直进不了main 函数&#xff0…...

编程日记 2023/8/31 1:54:07

不用循环数组，js+html实现贪吃蛇

功能描述：每走10步随机改变一个方方向，当键盘按下方向键 w,s,a,d时，使用键盘方向控制蛇的移动，蛇头每撞到一次自身时改变屏幕颜色，蛇头碰到边界时从另一边回来。实现思路：用个30大小的数组存放每个结点&a…...

编程日记 2023/8/31 1:53:05

什么是线程安全和线程不安全？

线程安全（Thread Safety）和线程不安全（Thread Unsafety）是与并发编程相关的概念，特别是在多线程环境中使用共享资源时会涉及到这些概念。线程安全：当多个线程同时访问共享资源时，如果在没有额外的同步措施的情况下，这些线程仍然能够正确地执行并保持数据的一致性，那…...

编程日记 2023/8/31 1:52:04

VUE笔记（十）Echarts

一、Echarts简介 1、什么是echarts ECharts是一款基个基于 JavaScript 的开源可视化图表库官网地址：Apache ECharts 国内镜像：ISQQW.COM x ECharts 文档（国内同步镜像） - 配置项示例：echarts图表集 2、第一个E…...

编程日记 2023/8/31 1:51:03

FPGA原理与结构——时钟IP核原理学习

一、前言在之前的文章中，我们介绍了FPGA的时钟结构 FPGA原理与结构——时钟资源https://blog.csdn.net/apple_53311083/article/details/132307564?spm1001.2014.3001.5502 在本文中我们将学习xilinx系列的FPGA所提供的时钟IP核，来帮助我们进一…...

编程日记 2023/8/31 1:50:02

创建python环境——Anaconda

在Windows中安装Anaconda和简单使用一.Anaconda发行概述 Anaconda是一个可以便捷获取和管理包，同时对环境进行统一管理的发行版本，它包含了conda、 Python在内的超过180个科学包及其依赖项。 1.Anaconda发行版本具有以下特点： (1)包含了…...

编程日记 2023/8/31 1:49:00

使用Linux部署Kafka教程

目录一、部署Zookeeper 1 拉取Zookeeper镜像 2 运行Zookeeper 二、部署Kafka 1 拉取Kafka镜像 2 运行Kafka 三、验证是否部署成功 1 进入到kafka容器中 2 创建topic 生产者 3 生产者发送消息 4 消费者消费消息四、搭建kafka管理平台五、SpringBoot整合Kafka 1…...

编程日记 2023/8/31 1:47:59

pyechart笔记：opts.AxisOpts

定制化图表的轴线（x轴和y轴）的样式和设置 0 不设置坐标轴 c1(Bar().add_xaxis([力量,智力,敏捷]).add_yaxis(全能骑士,# 系列名称，用于 tooltip 的显示，legend 的图例筛选。[429,321,296],#系列数据).add_yaxis(猴子,[352,236,4…...

编程日记 2023/8/31 1:46:57

深度思考rpc框架面经之五：rpc熔断限流、rpc复用连接机制

11 RPC框架如何实现限流和熔断推荐文章：RPC实现原理之核心技术-限流熔断 11.1 为什么Dubbo要做服务的限流？(根本原因是服务端进行自我保护) 限流是一种常见的系统保护手段。在分布式系统和微服务架构中，一个接口的过度使用可能会导致资源…...

编程日记 2023/8/31 1:45:56

Go 数组

数组用于在单个变量中存储相同类型的多个值，而不是为每个值声明单独的变量。声明数组在Go中，有两种声明数组的方式： 使用var关键字： 语法 var array_name [length]datatype{values} // 这里定义了长度或者 var array_n…...

编程日记 2023/8/31 1:44:55

04架构管理之分支管理实践-一种git分支管理最佳实践

专栏说明：针对于企业的架构管理岗位，分享架构管理岗位的职责，工作内容，指导架构师如何完成架构管理工作，完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作，专栏名称：架构管理…...

编程日记 2023/8/31 1:43:54

D.OASIS City 和 Warrix 在The Sandbox 庆祝 Rise of the 10th Legend十周年

D.OASIS 首次展示了变革性娱乐 D.OASIS City，正如它与 WARRIX 一起承诺的那样。WARRIX 是获得泰国国家队球衣生产授权的标志性运动服装品牌。这款激动人心的游戏冒险游戏于今天推出，让用户能够投入 D.OASIS City x WARRIX：Rise of the 10th…...

编程日记 2023/8/31 1:42:53

Git基本操作（Idea版）

第一次发布项目（本地->远程） 方式一通过push的方式推送本地库到远程库（远程已创建好仓库） 这种方式需要提前创建好仓库。右键点击项目，可以将当前分支的内容 push 到 GitHub 的远程仓库中。注意&#xff1a…...

编程日记 2023/8/31 1:41:48

NSS [羊城杯 2020]easyser

NSS [羊城杯 2020]easyser 开题。很容易让人觉得环境坏了。不要慌，无从下手时。看源码、扫目录、抓包。一套操作下来，发现几个可以下手的路由。 /index.php /robots.txt 访问 /star1.php，一说到百度，就猜测是否存在SSRF。源码中…...

编程日记 2023/8/31 1:40:47

理解底层— —Golang的log库，二开实现自定义Logger

理解底层— —Golang的log库，实现自定义Logger 1 分析实现思路基于golang中自带的log库实现：对日志实现设置日志级别，每天生成一个文件，同时添加上前缀以及展示文件名等日志级别，通过添加prefix：[INFO]、…...

编程日记 2023/8/31 1:39:45

RabbitMQ---Spring AMQP

Spring AMQP 1. 简介 Spring有很多不同的项目，其中就有对AMQP的支持： Spring AMQP的页面：http://spring.io/projects/spring-amqp 注意这里一段描述： Spring-amqp是对AMQP协议的抽象实现，而spring-rabbit 是对协…...

编程日记 2023/8/31 1:38:44

C语言练习题解析：挑战与突破，开启编程新篇章！（2）

💓博客主页：江池俊的博客⏩收录专栏：C语言刷题专栏👉专栏推荐：✅C语言初阶之路 ✅C语言进阶之路💻代码仓库：江池俊的代码仓库🎉欢迎大家点赞👍评论📝收藏⭐ 文…...

编程日记 2023/8/31 1:37:41

sqlite3 加密访问

关于sqlite3 加密一、相关加密用到的sqlcipher 1.1 sqlcipher 是一个数据库加密的开源库 sqlcipher开源地址我这边是使用的docker镜像，镜像地址： https://hub.docker.com/r/pallocchi/sqlcipher 加密格式 docker run -v <workdir>:/sqlcip…...

编程日记 2023/8/31 1:36:40

clickhouse 系列1：clickhouse v21.7.5.29 源码编译

1.gcc10安装安装依赖 yum update yum install -y gcc gcc-c++ yum install -y bzip2 下载gcc 源码包并解压 wget -P /data/base https://mirrors.aliyun.com/gnu/gcc/gcc-10.2.0/gcc-10.2.0.tar.gz cd /data/base && tar -xzvf /data/base/gcc-...

编程日记 2023/8/31 1:35:37

servlet初体验之环境搭建！！！

我们需要用到tomcat服务器，咩有下载的小伙伴看过来：如何正确下载tomcat？？？_明天更新的博客-CSDN博客 1. 创建普通的Java项目，并在项目中创建libs目录存放第三方的jar包。建立普通项目创建libs目录存放第三…...

编程日记 2023/8/31 1:34:36

宁芝 NIZ 键盘开机需要重新插拔 USB 线才能使用

宁芝 NIZ 键盘开机需要重新插拔 USB 线才能使用问题描述宁芝 NIZ 键盘开机后无法识别到键盘，需要重新插拔 USB 线才能使用。解决方法按住 Fn BackSpaceE 键 5 秒，键盘会切换模式, 状态灯闪 1 次为 USB 接口；状态灯闪 2 次为 PS / 2 …...

编程日记 2023/8/31 1:33:35

R编程教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 R是用于统计分析、绘图的语言和操作环境。R是属于GNU系统的一个自由、免费、源代码开放的软件，它是一个用于统计计算和统计制图的优秀工具。R语言的核心是解释计算机语言，其允许分支和循环以及使用函数的模块化编程。 R语言允许与以C&#xff…...

编程日记 2023/8/31 1:32:34

[CMake教程] CMake列表 - list

目录零、简介一、Reading二、Search三、Modification四、Ordering 零、简介列表在CMake中大量使用。初始化列表语法如下： set(myList a b c) # Creates the list "a;b;c"归根结底，列表只是一个由分号分隔列表项的单个字符串，这…...

编程日记 2023/8/31 1:30:19

报错 - net::ERR_ABORTED 500 (Internal Server Error)

报错：net::ERR_ABORTED 500 (Internal Server Error) 根据提示找到对应文件解决：检查代码，根据高亮颜色判断，发现箭头函数漏了一个>。报错：Uncaught TypeError: Assignment to constant variable. 原因&#x…...

编程日记 2023/8/31 1:29:18

【Java Easypoi Apache poi】 Word导入与导出

引入依赖 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId> </dependency>  <!-- 下面的依赖主要是为了使用A…...

编程日记 2023/8/31 1:28:16

Java稀疏数组

目录 1.稀疏数组 2.稀疏数组的使用 2.1 二维数组转换为稀疏数组 2.2 稀疏数组转换为二维数组 1.稀疏数组稀疏数组（Sparse Array）：当一个数组中的大部分元素为相同的值，可使用稀疏数组来保存该数组，可以将稀疏数组…...

编程日记 2023/8/31 1:27:13

内存管理框架 --- 基础知识

文章目录一、内存管理1.1 内存管理的出现1.2 内存管理的用途1.2.1 虚拟内存和物理内存的定义1.2.1.1 什么是虚拟内存？ 1.2.2 虚拟内存的划分：用户空间与内核空间 1.3 操作系统和MMU1.3.1 OS和MMU的关系1.3.2 虚拟地址到物理地址的映射流程 1.4 物理内存…...

编程日记 2023/8/31 1:26:12

React + Next.js 搭建项目（配有对比介绍一起食用）

文章标题 01 Next.js 是什么02 Next.js 搭建工具 create-next-app03 create-react-app 与 create-next-app 的区别04 快速构建 Next.js 项目05 App Router 与 Pages Router 的区别 01 Next.js 是什么 Next.js 是一个 React 框架，它允许你使用 React 框架建立超强的…...

编程日记 2023/8/31 1:25:11

【Java】Java基础

环境准备安装JDK和JRE 下载JDK，可以在官网Java Downloads | Oracle 中国下载，但是这里需要注册才能够下载。在Index of java-local/jdk (huaweicloud.com)也可以下载到，但是版本比较老，关系不大，直接下载&#xff0…...

编程日记 2023/8/31 1:24:10

Spring-SpringBoot-SpringMVC-MyBatis常见面试题

文章目录 Spring篇springbean是安全的的?什么是AOP你们工作中有用过AOP吗spring中的事务是如何实现的spring中事务失效场景Spring的生命周期spring中的循坏依赖springMVC的执行流程springboot的启动原理常用注解MyBatis执行流程Mybatis是否支持延迟加载？Mybatis的一…...

编程日记 2023/8/31 1:23:09

15.MyCat数据库分片

MyCat 是一个开源的数据库中间件，主要用于将数据库操作请求路由和分发到后端的多个数据库节点。 1.Mycat环境搭建在两个不同数据库中创建相同表下载mycat https://github.com/MyCATApache/Mycat-Serverhttps://github.com/MyCATApache/Mycat-Server 将下…...

编程日记 2023/8/31 1:22:08

【Python】PySpark

前言 Apache Spark是用于大规模数据（large-scala data）处理的统一（unified）分析引擎。简单来说，Spark是一款分布式的计算框架，用于调度成百上千的服务器集群，计算TB、PB乃至EB级别的海量数据…...

编程日记 2023/8/31 1:21:06

pycharm 打开Terminal时报错activate.ps1，因为在此系统上禁止运行脚本，并因此无法进入虚拟环境

pycharm 打开Terminal时报错activate.ps1，因为在此系统上禁止运行脚本，并因此无法进入虚拟环境如下图所示： 网上说可以set_restrictFalse什么的，虽然也可但可能会降低电脑安全性，可以将下面的终端改为cmd.exe即可...

编程日记 2023/8/31 1:20:05

[C++][C#]yolox TensorRT C++ C#部署

YOLOX是一种新型的高性能探测器，由开发者Zheng Ge、Songtao Liu、Feng Wang、Zeming Li和Jian Sun在《YOLOX: Exceeding YOLO Series in 2021》首次提出。与YOLOV5和YOLOV8相比，YOLOX具有更高的性能和更好的平衡，在速度和精度方面都表现出优越…...

编程日记 2023/8/31 1:19:04

根据源码，模拟实现 RabbitMQ - 网络通讯设计，自定义应用层协议，实现 BrokerServer (8)

目录一、网络通讯协议设计 1.1、交互模型 1.2、自定义应用层协议 1.2.1、请求和响应格式约定编辑 1.2.2、参数说明 1.2.3、具体例子 1.2.4、特殊栗子 1.3、实现 BrokerServer 1.3.1、属性和构造 1.3.2、启动 BrokerServer 1.3.3、停止 BrokerServer 1.3.4、处…...

编程日记 2023/8/31 1:18:03

MongoDB入门

简介 MongoDB是一个开源、高性能、支持海量数据存储的文档型数据库是NoSQL数据库产品中的一种，是最像关系型数据库（MySQL）的非关系型数据库内部采用BSON(二进制JSON)格式来存储数据,并支持水平扩展。 MongoDB本身并不是完全免费的,它对于…...

编程日记 2023/8/31 1:16:58

vr智慧党建主题展厅赋予企业数字化内涵

现如今，VR全景技术的发展让我们动动手指就能在线上参观博物馆、纪念馆，不仅不用受时间和空间的限制，还能拥有身临其境般的体验，使得我们足不出户就能随时随地学习、传承红色文化。很多党建展厅都是比较传统的，没有运用…...

编程日记 2023/8/31 1:15:56

go中mutex的sema信号量是什么？

先看下go的sync.mutex是什么 type Mutex struct {state int32sema uint32 } 这里面有个sema，这个就是信号量。什么是信号量？ 什么是信号量？_kina100的博客-CSDN博客其实通俗的来说，信号量就是信号灯，但是他不是…...

编程日记 2023/8/31 1:14:53

LeetCode笔记：Weekly Contest 360

LeetCode笔记：Weekly Contest 360 0. 吐槽1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 1. 解题思路2. 代码实现比赛链接：https://leetcode.com/contest/weekly-contest-360/ 0.…...

编程日记 2023/8/31 1:13:51