# mouse-shake **Repository Path**: shinn_lancelot/mouse-shake ## Basic Information - **Project Name**: mouse-shake - **Description**: 一个基于鼠标移动的轻量动画库 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: https://mouse-shake.netlify.app - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2022-05-07 - **Last Updated**: 2022-08-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## mouse-shake License Minfied Size Downloads Github Release NPM Release [![Netlify Status](https://api.netlify.com/api/v1/badges/c4e70470-10d6-4322-9413-71ed45d1a10c/deploy-status)](https://app.netlify.com/sites/mouse-shake/deploys) > 一个基于鼠标移动的轻量动画库 ### 效果 ![效果图](https://github.com/shinn-lancelot/mouse-shake/blob/master/example/effect.gif?raw=true) ### 在线体验 [点击体验](https://mouse-shake.netlify.app) ### 特性 * 🚀 极小的,压缩后大约4kb * 🚤 零依赖,不依赖第三方库 * 😁 易使用,安装、引入加载后,一行代码即可 ### 安装 * npm方式(推荐) ```bash npm i mouse-shake ``` * script方式 ```html ``` ### 快速开始 * dom部分 ```html
``` * 实例化MouseShake,el选项为需要绑定的元素 ```js let MS = new MouseShake({ el: '.icon' }) ``` ### 选项 | 选项 | 类型 | 描述 | 默认值 | 是否必填 | 例子 | | --- | --- | -- | --- | --- | --- | | `el` | `string` | 动画的元素 | | **是** | '.tag'、'#icon' | | `container` | `string` | 动画容器 | 'body' | **否** | 'body'、'#container'、'.container' | | `effect` | `number` | 动画效果[1: 平移, 2: 倾斜, 3: 平移倾斜] | 1 | **否** | 3 | | `direction` | `number` | 动画方向[1: 正向, 2: 反向] | 1 | **否** | 1 | | `effectConfig` | `object` | 动画配置[maxAngle: 最大倾斜角度, moveSpeed: 平移速度] | { maxAngle: 30, moveSpeed: 40 } | **否** | { maxAngle: 40, moveSpeed: 50 } | | `transitionDuration` | `number` | css过渡时间(单位:s) | 0.1 | **否** | 0.2 | | `keep` | `boolean` | 鼠标离开容器(body)后,是否保持动画效果 | true | **否** | false | | `debug` | `boolean` | 是否开启调试模式,调试模式会在控制台打印若干参数 | false | **否** | true | ### 方法 - version() 打印版本号等信息 - enable() 启用该实例 - disable() 禁用该实例