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

已于 2024-07-20 13:44:56 修改
阅读量413 收藏 18
点赞数 8
分类专栏： web开发 文章标签： html css javascript
于 2024-07-20 13:41:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65029152/article/details/140548243
版权

目录

一、业务需求

二、实现思路

三、实现过程

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>

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

每天进步一点点~！

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

白菜不太菜
关注
  • 8
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3+JS小实例：图片九宫格
艾恩小灰灰的博客
07-01 1864
实例：图片九宫格。技术栈：HTML+CSS+JS。
【Web前端实操15】利用Grid布局完成九宫格
qq_45498824的博客
01-25 624
一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。属性指定了列与列间的边框样式。属性指定了需要分割的列数。属性指定了列与列间的间隙。属性指定了两列的边框厚度。属性指定了两列的边框颜色。指定一个容器采用网格布局。
html 九宫格抽奖的效果demo
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-11 672
html 九宫格抽奖的效果demo
css布局实战:动态详情九宫格
weixin_43401380的博客
04-29 1027
grid-template-columns:指定显示每列显示的长度,可以使用repeat函数进行简化书写;较之前实现样式做以下调整:四张图按照两行显示,每行显示三个.不足的显示空白.之前是两行两列显示.对应九宫格样式布局,这里优化一下display布局方式,采用grid的方式进行处理..不过存在一个问题:图片之间没有间距,用户体验欠佳;基于以上问题,本文进行优化.grid-template-rows:指定每行显示的长度.简单记录一下希望对有同样需求的同学有所帮助!grid-gap:行与列之间的距离。
用HTML，CSS，JavaScript写一个简单的九宫格抽奖系统
weixin_68320295的博客
07-10 195
总结：定义两个计时器，分别开始，停止，document.getElementsByTagName接受的数组内容。遍历数组，每次遍历过后添加颜色，最后停止，将timer重新设置为10，反复循环。
css布局入门级实战之九宫格网格布局
weixin_43401380的博客
02-06 1057
入门级实战案例介绍css中如何实现九宫格布局!
javaScript、jQuery、html实现九宫格拼图游戏（逻辑及源码）
m0_56726855的博客
06-13 4378
最近突然想起来win7自带的拼图小游戏，现在已经玩不到了，于是便想自己实现一个，用了几天闲暇时间，终于捣鼓出来了。游戏使用js和jquery实现。
抽奖模拟器九宫格（用html+css+js实现）
tiffany1105的博客
08-10 1984
/ if (btn.innerText === '停止抽奖') {九宫格的抽奖模拟器，点击中间的按钮开始抽奖，再点击一次停止抽奖。// btn.innerText = '停止抽奖'// 随机生成0到7 之前的整数, 不包含7。// 判断是不是又上一次的高亮类型循环。// 通过索引随机访问 待中奖 div。// 记录下上一次的类名div。// 1.获取开始按钮dom。// // 开始抽奖。// 1.1 绑定点击事件。// //结束抽奖。// 获取随机数作为索引。// 三元表达式写法。...
JS + CSS 做一个简易九宫格抽奖
苏灵均的博客
09-17 2680
目录 1.CSS样式 2.JS动作 1.CSS样式 样式大概分以下方面； 创建外框及内框样式； 8个奖品小方格和中间按钮小方格； 奖品小方格内部图片； 选中奖品时的小方格样式； 先做两个方框，叠放在一起，里面的颜色比外面深一些 /*外部大框样式*/ .outer-square { background-color: cadetblue; width: 600px; height: 600px; b...
html+css、vue九宫格抽奖web页面源码，js九宫格抽奖代码
05-14
通过学习和理解这个九宫格抽奖项目，开发者不仅可以掌握前端开发的基本技能，还能深入理解如何使用Vue.js进行状态管理以及如何用JavaScript实现动态效果，这些都是现代Web开发中的重要技术。同时，这个项目也是实践...
css3九宫格图片悬停感知鼠标移动特效
11-11
【CSS3九宫格图片悬停感知鼠标移动特效】是一种利用CSS3技术实现的交互式网页设计技巧。在网页设计中，九宫格布局是一种常见的展示方式，它将页面分割成9个等大小的单元格，每个单元格可以用来显示图片、文字或其他...
CSS3九宫格图片悬停遮罩层特效
06-24
综上所述，"CSS3九宫格图片悬停遮罩层特效"是结合了现代CSS3特性和设计原则的一个实例，它展示了如何通过CSS3实现动态的、交互式的网页元素，提升用户在网页上的浏览体验。通过学习和实践这样的特效，开发者可以提升...
基于javascript实现九宫格大转盘效果
10-22
【JavaScript实现九宫格大转盘效果详解】 在网页交互设计中，抽奖大转盘是一种常见且吸引用户注意力的元素，通常用于增加用户参与度和趣味性。在本教程中，我们将探讨如何使用JavaScript实现一个九宫格大转盘的效果...
javascript九宫格图片随机打乱位置的实现方法
10-20
主要为大家详细介绍了javascript九宫格图片随机打乱位置的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
C# Word转换HTML（附在线转换工具）
最新发布
学习和分享
07-17 895
根据你的具体需求（如是否需要Microsoft Office、性能要求、成本考虑等），你可以选择使用或Aspose.Words来将Word文档转换为HTML。如果你正在寻找一个不依赖于Microsoft Office的解决方案，并且需要更多的灵活性和控制，那么Aspose.Words可能是一个更好的选择。
Html_Css问答集(11)
白话魔法师
07-16 846
html与css学习中的一些疑问，问答中轻松获取知识。
PhantomJs将html生成img|pdf
u014614478的博客
07-16 895
PhantomJS 生成图片，pdf，爬虫等功能
「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（三）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-16 908
本文主要介绍如何用DHTMLX Gantt将上下文菜单集成到JavaScript Gantt图中，欢迎下载最新版组件体验！
HTML+css+js九宫格抽奖
05-17
好的，以下是一个简单的 HTML+CSS+JS 九宫格抽奖的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>九宫格抽奖</title> <style type="text/css"> .container { display: flex; flex-wrap: wrap; width: 300px; height: 300px; margin: 0 auto; } .item { flex-basis: 33.33%; height: 33.33%; box-sizing: border-box; border: 1px solid #ccc; text-align: center; font-size: 24px; line-height: 100px; } .active { background-color: #ff0; } .btn { display: block; margin: 20px auto; padding: 10px 20px; font-size: 24px; background-color: #00f; color: #fff; border-radius: 5px; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> <button class="btn">开始抽奖</button> <script type="text/javascript"> var items = document.querySelectorAll('.item'); // 获取所有九宫格元素 var btn = document.querySelector('.btn'); // 获取开始抽奖按钮 var timer = null; // 定义计时器 btn.onclick = function() { if (timer) return; // 如果计时器已经在运行，则返回 var index = 0; // 初始化索引值 timer = setInterval(function() { // 清除其他元素的样式 for (var i = 0; i < items.length; i++) { items[i].classList.remove('active'); } // 添加当前元素的样式 items[index].classList.add('active'); // 更新索引值 index++; if (index >= items.length) { index = 0; } }, 100); // 3秒后停止计时器 setTimeout(function() { clearInterval(timer); timer = null; }, 3000); }; </script> </body> </html> ``` 这段代码实现了一个简单的九宫格抽奖功能，点击“开始抽奖”按钮后，九宫格中的元素会不断地轮流高亮显示，3秒后停止，并且最终停留在一个元素上。可以根据需要自行修改样式和逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值