# Layui MovBg Exp

**Repository Path**: kllxs_admin/layui-movbg-exp

## Basic Information

- **Project Name**: Layui MovBg Exp
- **Description**: 🖼️基 于 layui 的 动 态 背 景 拓 展 
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 2
- **Created**: 2024-09-10
- **Last Updated**: 2025-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: layui, JavaScript

## README

# 🖼️基 于 layui 的 动 态 背 景 拓 展

[layui官网](https://layui.dev/)

## 配置
movBg.js

```js
// 配置
layui.config({
    base: "/modules/" // movBg.js 文件的拓展目录
})
```

## API

| api | 描述 |
| ---- | ---- |
| let movBg = layui.movBg | 获得 `movBg` 模块 |
| movBg.firefly(elem,options) | 萤火虫背景 |
| movBg.square(elem,options) | 小方块背景 |


### 萤火虫背景

`movBg.firefly(elem,options);`

- 参数 `elem` ,类型 `DOM|string`,绑定元素

| 属性 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| elem | 绑定元素，方法渲染方式。| string|DOM | 必须 |

- 参数 `options`, 类型 `object` ，基础属性配置

> option属性

| 属性 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| num | 萤火虫数量 | number | 50 |
|background | 背景 | string | "#001f3f" |
| color | 字体颜色 | string | "white" |

```html
<!-- 引入layui.css，（根据自己实际情况） -->
<link rel="stylesheet" href="/layui/css/layui.css">

 <!-- 为了可观设置，（根据自己实际情况） -->
<style>
    .firefly-bg {
        width: 800px;
        height: 800px;
        max-width: 100%;
        max-height: 100%;
    }
</style>

<!-- 示例demo结构 -->
<div class="firefly-bg" id="firefly">
    <div class="content">
        <!-- 这里写你的内容 -->
        <h1>萤火虫</h1>
        <p>与萤火虫一起体验一个神奇的夜晚!</p>
    </div>
</div>

<!-- 引入layui.css，（根据自己实际情况） -->
<script src="/layui/layui.js"></script>
<!-- 配置 文件的拓展目录 -->
<script>
layui.config({
    base: "/modules/" // movBg.js (根据你的实际情况)
})
</script>

<!-- 渲染示例 -->
<script>
    layui.use(["movBg"], function () {
        let movBg = layui.movBg

        // 萤火虫 动态背景
        movBg.firefly("#firefly", {
            num: 30 //萤火虫数量
        })
    })
</script>
```

![](/firefly.gif)

### 小方块背景

`movBg.firefly(elem,options);`

- 参数 `elem` ,类型 `DOM|string`,绑定元素

| 属性 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| elem | 绑定元素，方法渲染方式。| string|DOM | 必须 |

- 参数 `options`, 类型 `object` ，基础属性配置

> option属性

| 属性 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| num | 小方块数量 | number | 20 |
|background | 背景 | string | "#1a1a1a" |
| color | 字体颜色 | string | "white" |

```html
<!-- 引入layui.css，（根据自己实际情况） -->
<link rel="stylesheet" href="/layui/css/layui.css">

 <!-- 为了可观设置，（根据自己实际情况） -->
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    #square-demo {
        width: 800px;
        height: 800px;
    }
</style>

<!-- 示例demo结构 -->
<div id="square-demo">
    <div class="content">
        <!-- 里面是你的内容 -->
        <h1>小方块</h1>
        <p>观看漂浮在太空中的3D立方体!</p>
    </div>
</div>

<!-- 引入layui.css，（根据自己实际情况） -->
<script src="/layui/layui.js"></script>
<!-- 配置 文件的拓展目录 -->
<script>
layui.config({
    base: "/modules/" // movBg.js (根据你的实际情况)
})
</script>

<!-- 渲染示例 -->
<script>
    layui.use(["movBg"], function () {
        let movBg = layui.movBg

        // 小方块 渲染
        movBg.square("#square-demo")
    })
</script>
```

![](/square.gif)

### 几何背景

`movBg.geom(elem,options);`

- 参数 `elem` ,类型 `DOM|string`,绑定元素

| 属性 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| elem | 绑定元素，方法渲染方式。| string|DOM | 必须 |

- 参数 `options`, 类型 `object` ，基础属性配置

> option属性

| 属性 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| num | 几何数量 | number | 20 |
|background | 背景 | string | "#f0f0f0" |
| color | 内容字体颜色 | string | "#000" |

```html
<!-- 引入layui.css，（根据自己实际情况） -->
<link rel="stylesheet" href="/layui/css/layui.css">

 <!-- 为了可观设置，（根据自己实际情况） -->
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    #geom-demo {
        width: 800px;
        height: 800px;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
    }
</style>

<!-- 示例demo结构 -->
<div id="geom-demo">
    <div class="content">
        <!-- 这里写你的内容 -->
        <h1>几何 形状</h1>
        <p>看 那 些 飘 浮 的 形 状 !</p>
    </div>
</div>

<!-- 引入layui.css，（根据自己实际情况） -->
<script src="/layui/layui.js"></script>
<!-- 配置 文件的拓展目录 -->
<script>
layui.config({
    base: "/modules/" // movBg.js (根据你的实际情况)
})
</script>

<!-- 渲染示例 -->
<script>
    layui.use(["movBg"], function () {
        let movBg = layui.movBg

        // 几何 渲染
        movBg.geom("#geom-demo")
    })
</script>
```

![](./geom.gif)