欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > jQuery鼠标吸附动画特效插件 target=_blank

jQuery鼠标吸附动画特效插件 target=_blank

jQuery鼠标吸附动画特效插件 target=_blank

关键词:鼠标跟随,鼠标吸附,jquery鼠标吸附动画,元素吸附,jquery鼠标跟随插件,jquery元素移动动画,jquery跟随动画,jquery库,gongjulei

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

简要教程

这是一款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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/9265.html

 在线演示  免费下载
编号:201808290000009265
大小:0.04MB
上传时间:2018-10-09 08:00
素材由用户"w7020626"上传分享。

标签

最新推荐素材

与jQuery鼠标吸附动画特效插件 target=_blank相关的素材

.