一、简介

​ 本篇博客用于讲解如何实现图片九宫格变幻的样式效果，将图片分为九块填充在3×3的的九宫格子元素中，并结合grid、hover、transition等CSS属性，实现元素hover时，九宫格子元素合并为一张完整图片的动画效果。

​ 为了简化代码，demo中通过JS设置CSS变量的方法，优化了元素背景的设置过程，减少了代码的繁杂度。

​ 最后还结合js的点击事件实现了一个简易的点击拼图demo。

效果示意图：

二、具体实现

1、九宫格子元素显示部分图片，然后从外向内组合变幻成完整图片

页面效果：

实现思路：

​ ① 首先在一个父元素内，创建九个子元素，并通过display: grid;实现3×3的九宫格布局，使其聚集在父元素中间，此时子元素之间无间隙。

​ ② 给这九个子元素通过background的相关属性，分别设置各个子元素的背景图片为总图片的一部分(1/9)，其聚集在一起时，正好能够组成一张完成的图片。

​ ③ 在设置子元素背景时，可以通过依次设置九个子元素的背景样式来实现，但是代码过于繁琐。为了优化代码，可以通过js获取相应元素，然后遍历获取到的元素设置CSS变量，最后再统一通过子级选择器+CSS变量的形式，统一设置元素背景。

​ ④ 设置好背景后，利用父元素grid布局的gap属性，统一设置子元素之间的间距，使九个子元素按照固定间距，形成九宫格布局。

​ ⑤ 父元素hover时，修改gap属性的值，使子元素再次聚集在一起，并通过transition实现缓动动画。

核心思路为：变化主体为父元素，子元素不改变，改变父元素控制间隙的属性。

具体代码：

<style>.d1 {/* 设置grid布局 */display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置子元素间隔 */gap: 20px;width: 340px;height: 340px;/* 设置子元素居中在父元素中心 */justify-content: center;align-content: center;cursor: pointer;/* 设置缓动动画 */transition: all 0.3s linear;border: 2px solid red;}/* hover时消除子元素间隔 */.d1:hover {gap: 0;}/* 统一设置子元素的背景 */.d1>div {background: url(../image/test.jpg) no-repeat;/* 设置背景图片大小 这个大小等于后面拼接成的完成图片的大小 */background-size: 300px 300px;/* 利用JS设置的CSS变量控制子元素的背景 */background-position: var(--bgx, 0) var(--bgy, 0);}
</style><div class="d1"><div class="d1-1"></div><div class="d1-2"></div><div class="d1-3"></div><div class="d1-4"></div><div class="d1-5"></div><div class="d1-6"></div><div class="d1-7"></div><div class="d1-8"></div><div class="d1-9"></div>
</div><script>// 获取所有子元素const d1List = document.querySelectorAll('.d1 > div');// 遍历所有子元素d1List.forEach((item, index) => {// 计算当前子元素所在行 0~2const row = Math.floor(index / 3);// 计算当前子元素所在列 0~2const col = index % 3;console.log(row, col);// 根据子元素所在行和列 设置CSS变量 决定显示的背景图片的偏移量 从而决定背景图片的内容item.style.setProperty('--bgx', `${-col * 100}px`);item.style.setProperty('--bgy', `${-row * 100}px`);})
</script>

2、九宫格子元素显示部分图片，然后从内向外组合变幻成完整图片

页面效果：

实现思路：

​ ① 首先在一个父元素内，创建九个子元素，并通过display: grid;实现3×3的九宫格布局，初始设置子元素的宽高小于grid布局设置的单元格宽高，然后通过相关属性设置子元素在对应单元格内水平垂直居中。

​ ② 给这九个子元素通过background的相关属性，分别设置背景图片为总图片的一部分。

​ ③ 在设置子元素背景时，可以通过依次设置九个子元素的背景样式来实现，但是代码过于繁琐。为了优化代码，可以通过js获取相应元素，然后遍历获取到的元素设置CSS变量，最后再统一通过子级选择器+CSS变量的形式，统一设置元素背景，使九个子元素各自占据背景图片的一部分。但由于此时子元素的宽高小于grid布局设置的单元格宽高，所以此时子元素之间存在间隙，而且所有子元素组合拼接的背景图片并不完整。

​ ④ 设置父元素hover时，改变子元素的宽高，使其充满单元格宽高，承载的背景图片比例也相应变大，此时子元素之间紧密连接，并组合拼接为一张完整的图片。

核心思路为：变化主体为子元素，子元素改变宽高属性，父元素不变。

具体代码：

<style>.d2 {/* 设置grid布局 */display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;width: 300px;height: 300px;cursor: pointer;border: 2px solid red;}.d2>div {/* 设置子元素的初始宽高 */width: 60px;height: 60px;/* 设置子元素位于grid布局网格的中心位置 */justify-self: center;align-self: center;/* 设置子元素缓动动画 */transition: all 0.3s linear;/* 设置子元素背景图片 */background: url(../image/test.jpg) no-repeat;/* 设置背景图片的大小 这个大小等于后面拼接成的完成图片的大小 */background-size: 300px 300px;/* 利用JS设置的CSS变量控制子元素的背景偏移 */background-position: var(--bgx, 0) var(--bgy, 0);}/* 父元素hover之后 修改子元素的宽高 使子元素能连接在一起 */.d2:hover div {width: 100px;height: 100px;}
</style><div class="d2"><div class="d2-1"></div><div class="d2-2"></div><div class="d2-3"></div><div class="d2-4"></div><div class="d2-5"></div><div class="d2-6"></div><div class="d2-7"></div><div class="d2-8"></div><div class="d2-9"></div>
</div><script>// 获取所有子元素const d2List = document.querySelectorAll('.d2 > div');// 遍历所有子元素d2List.forEach((item, index) => {// 计算当前子元素所在行 0~2const row = Math.floor(index / 3);// 计算当前子元素所在列 0~2const col = index % 3;console.log(row, col);// 根据子元素所在行和列 设置CSS变量 决定显示的背景图片偏移量item.style.setProperty('--bgx', `${-col * 100}px`);item.style.setProperty('--bgy', `${-row * 100}px`);})
</script>

3、九宫格子元素显示完整小图，然后从外向内合并成一张完整大图

页面效果：

实现思路：

​ ① 首先在一个父元素内，创建九个子元素，并通过display: grid;实现3×3的九宫格布局，并且设置子元素之间存在固定间隙。

​ ② 给每一个子元素都设置背景图片，并且设置背景图片的大小等于子元素的大小，使背景图片在子元素中完整展示。

​ ③ 在父元素hover时，修改子元素之间的间隙为0，并且修改子元素的背景图片大小和背景图片的偏移量，使子元素只显示背景图片的一部分，并且所有子元素拼接起来时，能够构成一张完整的背景图片。

核心思路：同时改变父元素和子元素，改变父元素控制间隙的属性，改变子元素的背景属性。

具体代码：

<style>.d4 {/* 设置grid布局 */display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置子元素之间的间隙 */gap: 20px;width: 340px;height: 340px;/* 设置子元素整体内容区域相对于父元素水平垂直居中 */justify-content: center;align-content: center;cursor: pointer;/* 设置父元素缓动动画 */transition: all 0.4s linear;border: 2px solid red;}.d4>div {/* 设置子元素缓动动画 */transition: all 0.4s linear;/* 设置子元素的背景 背景图片大小适配元素大小 */background: url(../image/test.jpg) no-repeat;background-size: 100% 100%;}/* 父元素hover时 将子元素之间的间隙变为0  */.d4:hover {gap: 0;}/* 父元素hover时 修改子元素背景图片的大小 以及背景图片偏移量 */.d4:hover>div {/* 设置的背景图片大小 就是子元素拼接成一张图片时 图片的大小 */background-size: 300px 300px;/* 根据JS设置的CSS变量 设置背景图片的偏移量 */background-position: var(--bgx, 0) var(--bgy, 0);}
</style><div class="d4"><div class="d4-1"></div><div class="d4-2"></div><div class="d4-3"></div><div class="d4-4"></div><div class="d4-5"></div><div class="d4-6"></div><div class="d4-7"></div><div class="d4-8"></div><div class="d4-9"></div>
</div><script>// 获取所有子元素const d4List = document.querySelectorAll('.d4 > div');// 遍历所有子元素d4List.forEach((item, index) => {// 计算当前子元素所在行 0~2const row = Math.floor(index / 3);// 计算当前子元素所在列 0~2const col = index % 3;console.log(row, col);// 根据子元素所在行和列 设置CSS变量 决定显示的背景图片偏移量item.style.setProperty('--bgx', `${-col * 100}px`);item.style.setProperty('--bgy', `${-row * 100}px`);})
</script>

三、延伸扩展

1、简易的九宫格拼图游戏

​ 上面的三个案例Demo中，都是在父元素hover时，通过控制CSS样式子元素进行整体变化，无法做到针对单个元素进行变化。如果我们结合JS的点击事件，以及子元素的定位属性，就可以实现针对单个元素的变化。比如实现简单的拼图游戏效果等等。

页面效果：

实现思路：

​ ① 首先在一个父元素内，创建九个子元素，并通过display: grid;实现3×3的九宫格布局，并且设置子元素之间无间隙，紧密结合在一起，并且在父元素中水平垂直居中。

​ ② 通过JS获取所有子元素，然后遍历获取到的子元素，根据子元素所在行和所在列，设置表示背景偏移的CSS变量，最后再统一通过子级选择器+CSS变量的形式，统一设置元素背景，使九个子元素各自占据背景图片的一部分。

​ ③ 在上一步遍历所有子元素时，根据子元素所在行和所在列，同步设置表示子元素偏移的CSS变量，然后再给子元素设置 position: relative;相对定位，最后再统一通过子级选择器+CSS变量的形式，利用CSS变量设置子元素的偏移量，使其形成有监理的九宫格布局。

​ ④ 在遍历所有子元素的同时，给所有子元素绑定点击事件，根据事件触发元素上的表示元素偏移量的CSS变量的值，决定元素该向内还是向外偏移，然后根据元素所在的行和列，决定具体的元素偏移量。

具体代码：

<style>.d3 {/* 设置grid布局 */display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;width: 340px;height: 340px;/* 设置子元素整体内容区域相对于父元素水平垂直居中 */justify-content: center;align-content: center;cursor: pointer;border: 2px solid red;}.d3>div {/* 设置子元素的偏移 使子元素之间出现间隙 形成九宫格布局 */position: relative;/* 利用JS的定义的CSS变量设置元素偏移量 */left: var(--pleft, 0);top: var(--ptop, 0);z-index: 1;width: 100px;height: 100px;/* 设置子元素的背景图片 */background: url(../image/test.jpg) no-repeat;/* 设置背景图片尺寸 该尺寸等同于子元素拼接后图片的尺寸 */background-size: 300px 300px;/* 利用JS的定义的CSS变量设置背景图片的偏移量 */background-position: var(--bgx, 0) var(--bgy, 0);/* 设置子元素的缓动动画 */transition: all 0.3s linear;}
</style><div class="d3"><div class="d3-1"></div><div class="d3-2"></div><div class="d3-3"></div><div class="d3-4"></div><div class="d3-5"></div><div class="d3-6"></div><div class="d3-7"></div><div class="d3-8"></div><div class="d3-9"></div>
</div><script>// 获取所有子元素const d3List = document.querySelectorAll('.d3 > div');// 遍历所有子元素d3List.forEach((item, index) => {// 计算当前子元素所在行 0~2const row = Math.floor(index / 3);// 计算当前子元素所在列 0~2const col = index % 3;// 根据子元素所在行和列 设置CSS变量 决定显示的背景图片偏移量item.style.setProperty('--bgx', `${-col * 100}px`);item.style.setProperty('--bgy', `${-row * 100}px`);// 根据子元素所在行和列 设置CSS变量 决定元素的偏移量item.style.setProperty('--pleft', `${(col - 1) * 20}px`);item.style.setProperty('--ptop', `${(row - 1) * 20}px`);// 为当前子元素添加点击事件item.addEventListener('click', (e) => {// 获取当前子元素表示元素偏移量的CSS变量值const left = e.target.style.getPropertyValue('--pleft');const top = e.target.style.getPropertyValue('--ptop');// 判断当前子元素是否在原始位置if (left === '0px' && top === '0px') {// 如果在原始位置 则根据子元素所在行和列 设置CSS变量 决定使元素偏移e.target.style.setProperty('--pleft', `${(col - 1) * 20}px`);e.target.style.setProperty('--ptop', `${(row - 1) * 20}px`);} else {// 如果不在原始位置 则将CSS变量值设置为0px 将其移回原始位置e.target.style.setProperty('--pleft', `0px`);e.target.style.setProperty('--ptop', `0px`);}});})
</script>