菜单 搜索
首页 前端知识 Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）

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

2024-08-14 22:08:25 前端知识 前端哥 585 206 我要收藏

目录

一、业务需求

二、实现思路

三、实现过程

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>

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

每天进步一点点~！

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/15609.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

苹果（apple）支付退款通知、api

2024-08-21 10:08:39

虚幻UE5发送 get、post 请求、读取 json 文件

2024-08-21 10:08:39

若依微服务框架，富文本加入图片保存时出现JSON parse error: Unexpected character (‘/‘ (code 47)):...

2024-08-21 10:08:38

Java实体和JSON之间的相互转换

2024-08-21 10:08:10

uniApp中使用JSON.stringify和JSON.parse进行序列化与反序列化

2024-08-21 10:08:10

C 第三方库【JSON】— jsoncpp

2024-08-21 10:08:07

测试萌新三天速通python基础(三)self参数,魔法方法,封装,继承,多态,json

2024-08-21 10:08:07

MySQL 之 JSON 支持（一）—— JSON 数据类型

2024-08-21 10:08:06

Postman 测试 POST 请求：JSON 类型参数实例深度解析

2024-08-21 10:08:06

大家推荐的文章
1

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
2

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
3

npm的使用

2024-08-18 00:08:131000
4

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
5

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
6

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
7

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
8

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
9

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
10

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！