当前位置：首页 > 网页特效 > 导航菜单

4种超酷jQuery导航超链接鼠标滑过动画特效插件

分类：导航菜单日期：2024-05-14 点击(7) 评论(0)

简介

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

```html
<script src="jquery.min.js" type="text/javascript"></script>
<script src="hoverSlippery.js" type="text/javascript"></script>
```                  
#####  HTML结构
可以使用nav元素来作为导航菜单，里面放置一组无序列表。

```html
<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()方法来初始化该导航菜单鼠标跟随特效插件。

```html
$('.demo').hoverSlippery();
```
#####  配置参数
HoverSlippery插件的默认配置参数如下：

```html
$('.demo').hoverSlippery({
  bgColor: '#394264',
  speed: 300,
  radius: '5px',
  border: false,
  borderColor: '#efefef',
  borderTop: 0,
  borderStyle: 'solid',
  borderWidth: '1px',
  borderTopLine: false,
  twiceBorder: false，
  underline:false,
  overline:false
});         
```         
- bgColor：胶囊的颜色背景。
- speed：动画的速度。
- radius：胶囊的圆角半径。
- border：是否使用边框。
- borderColor：边框的颜色。
- borderTop：border-top的宽度。
- borderStyle：边框的样式。
- borderWidth：边框的宽度。
- twiceBorder：是否使用双线效果。
- underline：是否使用下划线效果。
- overline：是否使用上划线效果。

web299.com

4种超酷jQuery导航超链接鼠标滑过动画特效插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果