​

​anchor-hover-effect​是一款炫酷的鼠标滑过超链接动画特效jQuery插件。该插件提供4种超链接动画效果：​3D翻转效果​，​括号动画效果​，​上下翻转效果​和​下划线动画效果​。

超链接 鼠标滑过超链接3D翻转效果，括号动画效果 jQuery插件_鼠标悬停3D翻转效果

​使用方法​

使用该插件需要在页面中引入​​anchorHoverEffect.css​​​，​​jquery​​​和​​anchorHoverEffect.js​​文件。

<link href="css/anchorHoverEffect.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script> <!-- 可选 -->
<script src="js/anchorHoverEffect.min.js"></script>

​HTML结构​

DEMO中使用无序列表来包裹一组超链接元素。

<ul class="ulDefault">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Angular Js</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Asp.net MVC</a></li>
</ul>

​初始化插件​

在页面DOM元素加载完毕之后，可以通过​​anchorHoverEffect()​​方法来初始化该超链接到能够插件。

$(".ulDefault a").anchorHoverEffect();

​配置参数​

该超链接动画插件有4个可用的配置参数，分别用于制作4最后不同的动画：

$(".ulDefault a").anchorHoverEffect({type: 'brackets'});

  • ​roller3d​ ：默认动画效果，3D翻转效果。
  • ​brackets​ ：方括号动画效果。
  • ​flip​ ：上下翻转超链接文本。
  • ​borderBottom​ ：下划线动画效果。

​anchor-hover-effect​超链接动画插件的github地址为：​​https://github.com/iSatinderSingh/anchor-hover-effect​​