# mSlider

**Repository Path**: helsmanli/mSlider

## Basic Information

- **Project Name**: mSlider
- **Description**: 简单修改mSlider的一些属性，总结了一些mSlider的一些用法，原始插件地址为https://denghao.me/index.php/archives/mslide.html
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-06-11
- **Last Updated**: 2022-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mSlider

#### 介绍
简单修改mSlider的一些属性，总结了一些mSlider的一些用法，原始插件地址为https://denghao.me/index.php/archives/mslide.html

#### 软件架构
软件架构说明


#### 安装教程

在项目中直接引入该插件，无需JQuery
 <script src="mSlider.js"></script>

#### 使用说明

1.  new一个实例：   var demo = new mSlider({dom: "#xxxx"})
2.  绑定方法:demo.open()
3.  属性：

|            属性          |            说明                |
|--------------------------|-------------------------------|
| dom                      | 容器节点(必填)                  | 
| distance                 | 弹层宽度(选填，默认"60%")        |
| time                     | 自动关闭时间(选填，默认不关闭)    |
| direction                | 弹出方向(选填，默认"left")       |
| maskClose                | 点击遮罩关闭弹层(选填，默认true)  |
| zIndex                   | 外部容器的z-index               |
| wrapStylePosition        | 外部容器位置(默认为'')           |
| wrapStyleWidth           | 外部容器宽度(默认为0%)           |
| wrapStyleHeight          | 外部容器高度(默认为0%)           |
| maskStyleBackgroundColor | 遮罩层颜色                      |
| onOpen                   | 打开弹层时回调函数(选填)          |
| onClose                  | 关闭弹层时回调函数(选填)          |

4.  方法

|方法名   |说明   |举例             |
|--------|-------|----------------|
|.open() |打开弹框|如：XXX.open()   |
|.close()|关闭弹框|如：XXX.close()  |

5.  演示DEMO（原插件的演示地址）

http://denghao.me/demo/2016/mslider.html