jQuery炫酷鼠标滑过菜单高亮菜单项动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jQuery Gooey Menu是一款可以制作炫酷的鼠标滑过菜单动画特效的jQuery插件。当鼠标滑过菜单项时，指定的CSS样式会跟随鼠标在菜单上运动，以平滑的动画方式高亮当前鼠标指向的菜单项。

使用方法

使用该插件需要引入jQuery，gooeymenu.js和gooeymenu.css文件。

<link rel="stylesheet" type="text/css" href="css/gooeymenu.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/gooeymenu.js"></script>

HTML结构

该菜单插件的基本HTML结构使用无序列表。

<ul id="gooeymenu1" class="gelbuttonmenu">
  <li><a href="#">Home</a></li>
  <li><a href="#">CSS Codes</a></li>
  <li><a href="#">Forums</a></li>
  <li><a href="#">Tools</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">CSS Gallery</a></li>
</ul>

CSS样式

在gooeymenu.css文件中预置了一些菜单项高亮的样式。你可以根据实际情况自行修改为自己需要的样式。

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该插件。

<script>
  gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>

配置参数

gooeymenu.setup()方法接收下面的一些可用参数：

参数	默认值	描述
id: "string"（必选）		指定菜单`<ul>`容器元素的ID号
selectitem: interger	undefined	设置页面初始化之后默认选择的菜单项。它也是鼠标离开菜单后高亮效果要回到的项。它是一个整数，0是第一项，1是第二项
fx: "string"	easeOutBack	设置动画的easing效果。默认值为：“easeOutBack”，可选值有：“swing”和“linear”
fxtime: milliseconds	500	设置动画的持续时间，单位毫秒
snapdelay: milliseconds	300	设置在鼠标离开菜单时高亮效果回到默认项之前的延迟时间，单位毫秒

还有第二种方式可以设置默认高亮的菜单项：通过为菜单项添加class selected来实现。

<ul id="gooeymenu1" class="gelbuttonmenu">
  <li><a href="#">Home</a></li>
  <li><a href="#">CSS Codes</a></li>
  <li><a href="#">Forums</a></li>
  <li><a href="#">Tools</a></li>
  <li><a href="#" class="selected">JavaScript</a></li>
  <li><a href="#">CSS Gallery</a></li>
</ul>

自定义高亮效果

该插件的高亮效果只是简单的在菜单中动态的添加一些绝对定位的<li>元素，在js文件中，你可以找到下面的代码：

effectmarkup: '<li class="active"></li>',

如果你想自定义高亮效果，可以在gooeymenu.css文件中修改li.active的样式，下面的代码是使用图片作为高亮样式的CSS代码：

ul.gelbuttonmenu li.active{ 
position:absolute;
width:0;
background:lightblue;
background:url(gelbuttonleft.gif) top left no-repeat,
           url(gelbuttonright.gif) top right no-repeat, 
           url(gelbuttoncenter.gif) top center repeat-x;
}