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

DeepSeek生成的简单3D货架

article 2025/1/6 4:48:26

先上以层布局图（8层 10列，每列3个抽屉）:

在这里插入图片描述

鼠标滑动效果：

以层布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 货架</title>
    <link href="//unpkg.com/layui@2.9.21-rc.3/dist/css/layui.css" rel="stylesheet">
    <!--<link href="layui/css/layui.css" rel="stylesheet"> 如果本地有就引入本地的-->
    <style>
        body, html {
            width: 100%; /* 确保 body 宽度为 100% */
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        .shelf-container {
            width: 70%; /* 屏幕宽度的 70% */
            height: 50%;
            display: flex;
            flex-direction: column; /* 垂直排列 */
            justify-content: space-between; /* 每层之间均匀分布 */
            align-items: center;
            position: relative;
            border: 6px solid #8B4513; /* 木制颜色边框 */
            border-top: 10px solid #8B4513; /* 上边框加厚 */
            border-bottom: 10px solid #8B4513; /* 下边框加厚 */
            box-sizing: border-box;
            background: linear-gradient(to bottom, #ccb89c, #938066); /* 渐变色 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
            transform-origin: center;
        }
        .column-labels {
            width: 100%;
            display: flex;
            justify-content: space-around; /* 列标签均匀分布 */
            align-items: center;
            padding: 10px 0; /* 上下内边距 */
            background-color: #8B4513; /* 背景色 */
            color: white; /* 文字颜色 */
            font-size: 20px; /* 文字大小 */
            font-weight: bold; /* 文字加粗 */
        }
        .column-labels span {
            flex: 1; /* 每个标签平均分配宽度 */
            text-align: center; /* 文字居中 */
        }
        .column-labels .placeholder {
            width: 60px; /* 占位宽度，与层序号宽度一致 */
        }
        .layer {
            width: 100%;
            height: 18%; /* 每层高度 */
            display: flex;
            justify-content: space-around; /* 格子之间均匀分布 */
            align-items: center;
            box-sizing: border-box;
            position: relative;
            border-top: 5px solid #8B4513; /* 每层顶部边框加粗 */
            background-color: #D2B48C; /* 木制背景色 */
            box-shadow: inset -3px 20px 5px rgba(6, 0, 0, 0.1); /* 内阴影 */
            border-radius: 5px; /* 圆角效果 */
        }
        .layer:first-child {
            border-top: none; /* 第一层不需要顶部边框 */
        }
        .layer-label {          
            width: 30px; /* 层序号宽度 */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px; /* 文字大小 */
            font-weight: bold; /* 文字加粗 */
        }
        .cell {
            width: 8%; /* 每个大格子的宽度 */
            height: 80%; /* 每个大格子的高度 */
            display: flex;
            flex-direction: row; /* 水平排列小格子 */
            justify-content: space-between; /* 小格子之间均匀分布 */
            align-items: center;
            background-color: #ffcc00; /* 大格子背景色 */
            border: 2px solid #A0522D; /* 木制颜色边框 */
            box-sizing: border-box;
            padding: 2px; /* 内边距 */
            border-radius: 8px; /* 圆角效果 */
            box-shadow: 20px 1px 20px 1px rgb(149 88 0 / 31%) /* 阴影 */
        }
        .sub-cell {
            width: 30%; /* 小格子宽度 */
            height: 90%; /* 小格子高度 */
            background-color: #FFF; /* 小格子背景色 */
            border: 1px solid #A0522D; /* 木制颜色边框 */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px; /* 小格子内文本大小 */
            color: #333; /* 小格子内文本颜色 */
            cursor: pointer; /* 鼠标指针样式 */
            /*border-radius: 2px;  圆角效果 */
            box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1); /* 内阴影 */
        }
        .sub-cell:hover {
            background-color: #EED9C4; /* 鼠标悬停效果 */
        }
    </style>
</head>
<body>
    <div class="shelf-container" id="shelf-container">
        <!-- 列序号标注 -->
        <div class="column-labels" id="column-labels">
            <!-- 占位 div，与层序号宽度一致 -->
            <div class="placeholder"></div>
            <!-- 列序号将通过 JavaScript 动态生成 -->
        </div>
        <!-- 货架内容将通过 JavaScript 动态生成 -->
    </div>

    <!-- 引入 Layui  <script src="layui/layui.js"></script> -->
    <script src="//unpkg.com/layui@2.9.21-rc.3/dist/layui.js"></script>
    
    <script>
        // 定义货架的层数和每层的格子数
        const layers = 8; // 8 层
        const cellsPerLayer = 10; // 每层 10 个格子
        const subCellsPerCell = 3; // 每个格子有 3 个小格子

        // 获取货架容器和列序号容器
        const shelfContainer = document.getElementById('shelf-container');
        const columnLabels = document.getElementById('column-labels');

        // 生成列序号（A1-A10）
        for (let i = 1; i <= cellsPerLayer; i++) {
            const label = document.createElement('span');
            label.textContent = `A${i}`; // 列序号（A1-A10）
            columnLabels.appendChild(label);
        }

        // 遍历生成每一层（倒序）
        for (let i = layers; i >= 1; i--) {
            // 创建层元素
            const layer = document.createElement('div');
            layer.className = 'layer';

            // 添加层序号
            const layerLabel = document.createElement('div');
            layerLabel.className = 'layer-label';
            layerLabel.textContent = i; // 层序号（倒序）
            layer.appendChild(layerLabel);

            // 遍历生成每个格子
            for (let j = 0; j < cellsPerLayer; j++) {
                // 创建格子元素
                const cell = document.createElement('div');
                cell.className = 'cell';

                // 遍历生成每个小格子
                for (let k = 0; k < subCellsPerCell; k++) {
                    // 创建小格子元素
                    const subCell = document.createElement('div');
                    subCell.className = 'sub-cell';
                    subCell.textContent = k + 1; // 小格子内容
                    subCell.setAttribute('lay-tips', `第 ${i} 层，第 A${j + 1} 列，第 ${k + 1} 小格`); // 设置提示文本
                    cell.appendChild(subCell); // 将小格子添加到格子中
                }

                layer.appendChild(cell); // 将格子添加到层中
            }

            shelfContainer.appendChild(layer); // 将层添加到货架容器中
        }

        // 初始化 Layui 的工具提示
        layui.use('layer', function () {
            const layer = layui.layer;

            // 为每个小格子绑定鼠标滑过事件
            document.querySelectorAll('.sub-cell').forEach(subCell => {
                subCell.addEventListener('mouseenter', function () {
                    const tips = this.getAttribute('lay-tips'); // 获取提示文本
                    layer.tips(tips, this, {
                        tips: [1, '#8C4213'], // 提示框样式
                        time: 0, // 不自动关闭
                    });
                });

                subCell.addEventListener('mouseleave', function () {
                    layer.closeAll('tips'); // 关闭提示框
                });
            });
        });
    </script>
</body>
</html>

以格子直接布局8*10 效果：

在这里插入图片描述

以列布局代码：

3D 货架

<!-- 引入 Layui -->
<script src="layui/layui.js"></script>
<script>
    // 定义货架的层数和列数
    const layers = 8; /* 8 层 */
    const columns = 10; /* 10 列 */
    const subCellsPerCell = 3; /* 每个格子有 3 个小格子 */

    // 获取货架容器
    const shelfContainer = document.getElementById('shelf-container');

    // 遍历生成每一层
    for (let i = 0; i < layers; i++) {
        // 遍历生成每一列
        for (let j = 0; j < columns; j++) {
            // 创建格子元素
            const cell = document.createElement('div');
            cell.className = 'cell';

            // 遍历生成每个小格子
            for (let k = 0; k < subCellsPerCell; k++) {
                // 创建小格子元素
                const subCell = document.createElement('div');
                subCell.className = 'sub-cell';
                subCell.textContent = k + 1; /* 小格子内容 */
                subCell.setAttribute('lay-tips', `第 ${i + 1} 层，第 ${j + 1} 列，第 ${k + 1} 小格`); /* 设置提示文本 */
                cell.appendChild(subCell); /* 将小格子添加到格子中 */
            }

            shelfContainer.appendChild(cell); /* 将格子添加到货架容器中 */
        }
    }

    // 初始化 Layui 的工具提示
    layui.use('layer', function () {
        const layer = layui.layer;

        // 为每个小格子绑定鼠标滑过事件
        document.querySelectorAll('.sub-cell').forEach(subCell => {
            subCell.addEventListener('mouseenter', function () {
                const tips = this.getAttribute('lay-tips'); /* 获取提示文本 */
                layer.tips(tips, this, {
                    tips: [1, '#8C4213'], /* 提示框样式 */
                    time: 0, /* 不自动关闭 */
                });
            });

            subCell.addEventListener('mouseleave', function () {
                layer.closeAll('tips'); /* 关闭提示框 */
            });
        });
    });
</script>

查看全文

http://www.kler.cn/a/465447.html