# mouser
**Repository Path**: lqy178/mouser
## Basic Information
- **Project Name**: mouser
- **Description**: 鼠标特效库，简单几行代码就可实现华丽的鼠标拖尾特效
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 1
- **Created**: 2022-08-05
- **Last Updated**: 2025-02-26
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 开源项目
## README
# mouser
### author: 猿某人
### QQ: 1787750205
#### 介绍
鼠标特效库，简单几行代码就可实现华丽的鼠标拖尾特效
#### 菜单（改变drawType）
1. 躁动线条
2. 绚丽流星
3. 大数据专用
4. 街头涂鸦
5. 连线点阵
6. 萤火之光
7. 多彩烟花
8. 放大镜
#### 火候及调料
| 字段 | 默认值 | 说明 |
|:---:|:---:|:---|
| el | `document.body` | 挂载节点，即在哪里创建特效元素 |
| drawType | 1 | 特效选择
1 躁动线条
2 绚丽流星
3 大数据专用
4 街头涂鸦
5 连线点阵
6 萤火之光
7 多彩烟花
8 放大镜 |
| leaveAutoer | true | 鼠标移出后自动绘制(drawType为1时生效) |
| showTime | 20 | 绘制的线条显示的时间(drawType为1时生效) |
| maxWidth | 20 | 最大宽度(drawType为1时生效) |
| minWidth | 5 | 最小宽度(drawType为1时生效) |
| color | 2默认值#F8EC85
5默认值#A5FBFF | 星星的颜色(drawType为2和5时生效) |
| dotColor | #9CD9F9 | 点的颜色(drawType为3时生效) |
| lineColor | #9CD9F9 | 线的颜色(drawType为3时生效) |
| number | 8000 | 点的数量(drawType为5时生效) |
| colors | ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'] | 礼花颜色(drawType为7时生效) |
| multi | 1.5 | 放大倍率(drawType为8时生效) |
| multiDom | `document.getElementById('app')` | 需要放大的dom节点对象（暂不支持canvas或子节点包含canvas的节点） |
| border | null | 放大镜镜框(drawType为8时生效) |
#### 烹调方式
> npm方式
```js
npm i mouser-lqy -S
import 'mouser-lqy';
```
> git下载方式
```js
// 或者
import 'mouser/index.js';
```
> 配置并生成鼠标特效，以及实时更换鼠标特效功能
```js
let mouserModel = 1, mouser;
const mouseModels = {
1: {
title: '彩色线条',
options: {
leaveAutoer: false,
showTime: 20,
maxWidth: 12,
minWidth: 4,
}
},
2: {
title: '金闪闪',
options: {
color: '#F8EC85',
}
},
3: {
title: '大数据',
options: {
dotColor: '#F22323',
lineColor: '#F2EC23'
}
},
4: {
title: '街头涂鸦',
options: {}
},
5: {
title: '连线点阵',
options: {
color: '#FFF300',
number: 10000
}
},
6: {
title: '萤火之光',
options: {}
},
7: {
title: '多彩烟花',
options: {
colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
}
},
8: {
title: '放大镜',
options: {
multi: 1.5,
multiDom: document.getElementById('body'),
border: {
width: 10,
color: '#069'
}
}
}
}
mouser = new Mouser({
...{
drawType: mouserModel,
el: document.getElementById('kaka')
},
...mouseModels[mouserModel].options
});
function changeMouser(type) {
mouserModel = type;
document.title = `Canvas绘制鼠标${mouseModels[mouserModel].title}特效`;
mouser.changeModel({
...{
drawType: mouserModel
},
...mouseModels[mouserModel].options
});
}
```
#### 效果
