4種超酷jQuery導(dǎo)航超鏈接鼠標(biāo)滑過動畫特效插件HoverSlippery

使用方法

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

<script src="jquery.min.js" type="text/javascript"></script>
<script src="hoverSlippery.js" type="text/javascript"></script>

HTML結(jié)構(gòu)

可以使用<nav>元素來作為導(dǎo)航菜單，里面放置一組無序列表。

<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()方法來初始化該導(dǎo)航菜單鼠標(biāo)跟隨特效插件。

$('.demo').hoverSlippery();

配置參數(shù)

HoverSlippery插件的默認(rèn)配置參數(shù)如下：

$('.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：是否使用上劃線效果。