这是一款jQuery鼠标吸附动画特效插件。该插件可以在一定范围内,通过鼠标移动,对指定元素产生吸附移动的动画特效。
使用方法
在页面中引入jquery和attractHover.js文件。
<script src="js/jquery.min.js"></script> <script src="js/attractHover.js"></script>
HTML结构
然后在页面中使用下面的HTML结构来创建元素。
<div class="boundary"> <a href="#" class="example"> Element </a> </div>
初始化插件
在页面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