鼠标跟随悬浮球

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方式

npm i obey-cursor -S

import 'obey-cursor';
// 或者
import DynamicCursor from 'obey-cursor';
// 或者
const DynamicCursor = require('obey-cursor');

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

标签方式

<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>