当前位置:JS特效 » 其他 » jQuery鼠标吸附动画特效插件
 jQuery鼠标吸附动画特效插件
如果您觉得内容不错,请分享:

插件介绍

这是一款jQuery鼠标吸附动画特效插件。该插件可以在一定范围内,通过鼠标移动,对指定元素产生吸附移动的动画特效。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:68
简要教程

这是一款jQuery鼠标吸附动画特效插件。该插件可以在一定范围内,通过鼠标移动,对指定元素产生吸附移动的动画特效。

使用方法

在页面中引入jquery和attractHover.js文件。


                   
                
HTML结构

然后在页面中使用下面的HTML结构来创建元素。


                
初始化插件

在页面DOM元素加完毕之后,通过下面的方法来初始化插件。

$.attractHover('.example');
                

配置参数

jQuery鼠标吸附动画特效插件的可用配置参数有:

参数 类型 默认值 描述
proximity integer 30 元素的交互范围
magnetism integer 3 定义元素可以移动多远的距离
attractClass string attract-hover 被吸附元素动态添加的class类
attractEasingClass string attract-hover-easing 被吸附元素移动时动态添加的class类
attractAttractedClass string attract-hover-attracted 元素被吸附时添加的class类

例如:

$.attractHover('.js-attract', { proximity: 10 });
                

jQuery鼠标吸附动画特效插件的github地址为:https://github.com/bymayo/jquery-attract-hover

Top