jQuery炫酷鼠标滑过菜单高亮菜单项动画特效

当前位置:主页 > jQuery库 > 布局和界面 > jQuery炫酷鼠标滑过菜单高亮菜单项动画特效
jQuery炫酷鼠标滑过菜单高亮菜单项动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-08-27
    阅读:
简要教程

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;
}