鼠标移上去会出现有色的线条 ，移动到别的区域它也会跟着移动，同时也会自动隐藏与感应出现，看示例：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>堆糖网</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> /* 此段样式为清除浮动通用样式 */ .clr{zoom:1;border:1px solid green} .clr:after{content:"\0020";display:block;height:0;overflow:hidden;clear:both;} /****/ .mynav ul{margin:0;padding:0;list-style:none;} .mynav li{float:left;+display:inline;line-height:21px;margin:4px 0 0;padding:0;vertical-align:middle;border:1px solid #f00;} .mynav li a:link,.mynav li a:visited{display:block;line-height:31px;padding:12px 12px 14px;font-size:16px;text-decoration:none;font-family:'\5FAE\8F6F\96C5\9ED1';color:#666;} .mynav li a:hover{color:#f21664;text-decoration:none;} .mynav li.cur a:link,.mynav li.cur a:visited{color:#f21664;} .mynav li.cur a:hover{color:#f21664;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <div id="mynav1" class="mynav clr" > <ul> <li><a href="">我的堆糖</a></li> <li><a href="">发现</a></li> <li><a href="">小组</a></li> <li><a href="">专辑</a></li> </ul> </div> <div id="mynav2" class="mynav clr"> <ul> <li><a href="">我的堆糖</a></li> <li><a href="">发现</a></li> <li><a href="">小组</a></li> <li><a href="">专辑</a></li> </ul> </div> <script> $(function (){ //无默认选中项 $('#mynav1').minibar() //有默认选中项 $('#mynav2').minibar({"idx":2}) }) ;(function($){ $.fn.minibar = function(opt){ var $mynav = this.css("position","relative"), //一般为主导航 $ba = $('<div/>').appendTo($mynav); //迷你条 //配置项合并 opt = $.extend({},$.fn.minibar.defaults,opt); //鼠标hover 事件 $mynav.find('li').hover(function (){ var t = this; //终止迷你条还原过程 clearTimeout($ba.data('timer')) //直接到达当前鼠标hover 的位置 _set(t) },function (){ //鼠标hover 的li 节点 var t = this; //通过data 来保存计时器 $ba.data('timer',setTimeout(function (){ //迷你条还原，从当前鼠标hover 的位置moveto 原选中位置 _set($mynav.find('.'+opt.cur),t) },300)) }) //设置初始位置【我的堆糖】 class="cur" 标识 opt.idx && _set($mynav.find('li').eq(opt.idx).addClass(opt.cur)) //内部调用方法 function _set(sel,sel2){ var $cu = $(sel), //一般为初始位置，有可能没有初始位置 class="cur" 标识 $tu = $(sel2); //一般为鼠标hover 的位置 if( $cu.length ){ var ow = $cu.outerWidth(), ol = $cu.position().left; //当前所在条初始化 if( $ba.css("position") !== "absolute" ){ $ba.css({ "position" : "absolute", "height" : 4, "top" : 0, "overflow" : "hidden", "backgroundColor" : "#F21664", "width" : 0, "left" : ol + ow/2 }) } $ba.stop().animate({ "width" : ow, "left" : ol },300) }else if( $tu.length ){ //如果没有找到 class="cur" 的初始位置，则就地隐去 var ow = $tu.outerWidth(), ol = $tu.position().left; $ba.stop().animate({ "width" : 0, "left" : ol + ow/2 },300) } } return $mynav; //保持队形了 } //默认配置项 $.fn.minibar.defaults = { "idx" : null, //初始化就选中的序号数，默认null 表示无选中项 "cur" : "cur" //选中项的className }; })(jQuery) </script> </body> </html>
提示：你可以先修改部分代码再运行。
