自己公司怎样做免费的网站,wordpress 图片命名,网站开发人员岗位描述,网站开发 验收目录
一、业务需求
二、实现思路
三、实现过程
1、基础页面
2、图片大小调整
3、图片位置调整
4、鼠标控制切换
5、添加过渡
四、完整代码 一、业务需求
默认显示基础图片#xff1b;
当鼠标移入#xff0c;使用九宫格效果展示图片#xff1b;
当鼠标离开#…目录
一、业务需求
二、实现思路
三、实现过程
1、基础页面
2、图片大小调整
3、图片位置调整
4、鼠标控制切换
5、添加过渡
四、完整代码 一、业务需求
默认显示基础图片
当鼠标移入使用九宫格效果展示图片
当鼠标离开使用非九宫格效果展示图片 【鼠标移入九宫格展示效果】 【鼠标离开非九宫格展示效果默认效果】 【视频效果】 图片九宫格与非九宫格动态切换效果 二、实现思路
准备一个Grid布局添加 3 * 3 9 个Grid元素每个Grid元素的背景均设为该目标图片调整图片大小设置每个背景图的宽高为单个Grid元素宽高的三倍调整图片位置设置每个Grid元素显示对应位置的图片内容能够拼成一个完整的图片通过对Grid元素间隙的控制在视觉上实现九宫格和非九宫格的切换效果
三、实现过程
1、基础页面
1HTML布局
分析需求可知
布局内容非常简单只需要1个Grid容器【.grid-container】和9个Grid元素【.grid-item】可以再给Grid容器添加一个父盒子【.container】使图片的九宫格在父盒子中居中显示
bodydiv classcontainerdiv classgrid-containerdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/div/div/div
/body
2CSS样式
设置【.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 再向下取整得到 012计算每个元素的列号c计算 i % 3 得到 012行号 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图片九宫格切换展示效果/titlestyle* {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
/headbodydiv classcontainerdiv classgrid-containerdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图片九宫格切换展示效果/titlestyle* {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
/headbodydiv classcontainerdiv classgrid-containerdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-item/divdiv classgrid-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 每天进步一点点~
期待你更好的实现方法~~
