可將任何元素吸附到鼠標上的js插件

簡要教程

stickyelements-animate.js是一款可以將任何HTML元素吸附到鼠標上制作鼠標跟隨動畫的js插件。通過該插件可以輕松的制作出鼠標滑過元素時，元素吸附在鼠標上，并跟隨鼠標移動的動畫效果。

查看演示        下載插件

安裝

可以通過npm來安裝stickyelements-animate.js插件。

npm install stickyelements

使用方法

在頁面中引入stickyelements-animate.js文件。

<script src="dist/stickyelements-animate.js"></script>

初始化插件

在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該插件。

stickyElements('.item', {
  stickiness: 5,
  duration: 450
});

stickyElements()方法的第一個參數接受一組DOM元素或選擇器，例如上面的代碼使所有帶有.item的元素可以被鼠標吸附。你也可以指定一組DOM元素，例如：

stickyElements('a, button, h1 span', {
  stickiness: 5, 
  pointer: true
});

配置參數

stickyelements-animate.js插件的可用配準參數有：

• stickiness [Integer, Object]：元素距離鼠標多遠時會產生吸附效果。如果時整數，接受x和y值，如果時對象，可以包含x和y。整數在0-10之間，默認值為3。
• duration [Integer]：動畫的持續事件，單位毫秒。默認450。
• pointer [Boolean]：使用Pointer事件來取代Mouse事件。元素將會被吸附到鼠標、touch和所有input類型上，默認為false。該參數需要 PEP polyfill 的支持，并且每個元素上都需要標明touch-action屬性。

stickyelements-animate.js插件的github地址為： https://github.com/iamvdo/stickyElements

來源：jQuery之家