# DynamicCursor

**Repository Path**: lqy178/dynamic-cursor

## Basic Information

- **Project Name**: DynamicCursor
- **Description**: 鼠标跟随悬浮球，让鼠标灵动起来
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-07
- **Last Updated**: 2023-02-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 开源项目

## README

# 鼠标跟随悬浮球 

### author: 猿某人
### QQ: 1787750205

### 介绍
鼠标跟随悬浮球，让鼠标灵动起来

### 说明
仅支持客户端渲染，请在项目的客户端脚本中引入使用；图标库用的是line-awesome(https://icons8.com/line-awesome)

### 效果参考：
https://www.ymrlqy.top/support/DynamicCursor/test.html

### 火候及调料
| 字段 | 默认值 | 说明 |
|:---:|:---:|:---|
| size | 18 | 默认大小 |
| expandedSize | 40 | 特殊大小 |
| background | 'rgba(161, 142, 218, 0.4)' | 小球背景 |
| borderWidth | 0 | 边框 |
| borderColor | 'black' | 边框颜色 |
| iconSize | 28 | 图标大小 |
| iconColor | 'white' | 图标颜色 |
| selectColor | '#17BFA3' | 特殊动作对象的边框颜色 |
| triggerElements | [] | 特殊动作的目标对象，className是对象的class名称，有icon则显示icon，没有则变为对象的边框 |

### 烹调方式
> npm方式

```shell
npm i obey-cursor -S
```
```js
import 'obey-cursor';
// 或者
import DynamicCursor from 'obey-cursor';
// 或者
const DynamicCursor = require('obey-cursor');

// 初始化
const dynamicCursor = new DynamicCursor({
	triggerElements: [
		{className: 'routerLink'}
	]
});
// 销毁
dynamicCursor.remove();
dynamicCursor = null;
```
> 标签方式

```html
<script src="https://www.ymrlqy.top/support/DynamicCursor/cursor.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	let dynamicCursor, destoryFunc;
	window.onload = () =>{
		dynamicCursor = new DynamicCursor({
			triggerElements: [
				{className: 'abc',icon: 'lab la-accessible-icon'},
				{className: 'bdd',icon: 'las la-dragon'},
				{className: 'hah'},
				{className: 'big'}
			]
		});
		// 销毁事件
		destoryFunc = () => {
			dynamicCursor.remove();
			dynamicCursor = null;
		}
	}
</script>
```