其他代码

jQuery鼠标吸附动画特效插件

面包多

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

使用方法:

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

也想出现在这里?联系我们
创客主机
  1. <script src="js/jquery.min.js"></script>
  2. <script src="js/attractHover.js"></script>

HTML 结构:

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

  1. <div class="boundary">
  2.   <a href="#" class="example">
  3.     Element
  4.   </a>
  5. </div>

初始化插件:

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

  1. $.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 类

例如:

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

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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!