文本/链接
4种超酷jQuery导航超链接鼠标滑过动画特效插件
PetitQ
HoverSlippery 是一款可以制作导航超链接鼠标滑过动画特效的 jQuery 插件。该插件可以制作 4 种鼠标滑过效果，分别是：胶囊跟随效果，双线跟随效果，下划线跟随效果和上划线跟随效果。
使用方法:
在页面中引入 jquery 和 hoverSlippery.js 文件。
也想出现在这里？联系我们吧
<script src="jquery.min.js" type="text/javascript"></script>
<script src="hoverSlippery.js" type="text/javascript"></script>
HTML 结构:
可以使用[nav]元素来作为导航菜单，里面放置一组无序列表。
<nav class="nav demo">
<ul>
<li class="nav__item active"><a href="#">Home</a></li>
<li class="nav__item"><a href="#">Fashion</a></li>
<li class="nav__item"><a href="#">Lifestyles</a></li>
<li class="nav__item"><a href="#">Travels</a></li>
<li class="nav__item"><a href="#">Music</a></li>
<li class="nav__item"><a href="#">About us</a></li>
<li class="nav__item"><a href="#">Contact</a></li>
</ul>
</nav>
初始化插件:
在页面 DOM 元素加载完毕之后，可以通过 hoverSlippery()方法来初始化该导航菜单鼠标跟随特效插件。
$('.demo').hoverSlippery();
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
