导航栏 active 跟随鼠标效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
        #bg { background-color: rgb(102, 132, 228);}
    </style>
    <title></title>
    <!--<link href="css/nicenav.css" rel="stylesheet" />-->
    <!--<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/jquery.nicenav.js" type="text/javascript"></script>
    <style type="text/css">
    	*{margin: 0;padding: 0;}
    	#container {  945px; height: 74px;  overflow: hidden; margin: auto; font-family: Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif; }
    	#container ul { height: 74px;}
    	#container li { display: block; float: left;  133px; height: 74px; background: url(../images/transparent.png); line-height: 32px; padding-right: 2px; line-height: 74px; list-style: none; }
        #container li a { color: #fff; text-decoration: none; display: block; position: relative; background: url(../images/black.png);  123px; height: 74px; padding-right: 10px; font-size: 14px; font-weight: bold; text-align: right; }
        #container li a:hover { background: #222; }
        #container li a span { display: block; position: absolute; left: 10px; top: 0; font-weight: normal; font-size: 10px; -webkit-text-size-adjust: none; opacity: 0.6; filter: alpha(opacity=60); }
		#buy { position: absolute;  133px; height: 2px; background: #e9d008; bottom: 0px; left: 0; }
    </style>
</head>
<body>
    <div id="bg">
        <div id="container">
            <ul id="nav" style="position: relative;">
                <li><a href="http://sc.chinaz.com/" target="_blank">Ʒ��<span>BRAND</span></a></li>
                <li><a href="http://sc.chinaz.com/" target="_blank">�ſ�<span>OVERVIEW</span></a></li>
                <li><a href="http://sc.chinaz.com/" target="_blank">��ֵ<span>WORTH</span></a></li>
                <li><a href="http://sc.chinaz.com/" target="_blank">����<span>SUPPORT</span></a></li>
                <li><a href="http://sc.chinaz.com/" target="_blank">����<span>UNIT</span></a></li>
                <li><a href="http://sc.chinaz.com/" target="_blank">��װ<span>HARDCOVER</span></a></li>
                <li><a href="http://sc.chinaz.com/" target="_blank">��̬<span>NEWS</span></a></li>
                <div id="buy"></div>
            </ul>
        </div>
     </div> 
     <hr>
    <!--<script type="text/javascript">
        $.nicenav(300);
    </script>-->
    
    <script type="text/javascript">
    	$(function(){
    		var lis = $('#nav>li'), 
    			h = $('#buy')
    		
    		$(lis).hover(function(){
    			var index =$(this).index();
    			console.log($(this).offset())
    			var offl=$(this).offset().left-$(this).width()
    			$(h).stop().animate({
                    'left': offl
    			},300)
    		},function(){
    			$(h).stop().animate({
                    'left': $(this).offset().left-$(this).width()
                }, 400);
    		})
    		
    	})
    	
    </script>
    
</body>
</html>

　　虽然很简单也还是记录下，

插件方式

; (function ($) {
    $.extend({
        'nicenav': function (con) {
            con = typeof con === 'number' ? con : 400;
            var $lis = $('#nav>li'), $h = $('#buoy')
            $lis.hover(function () {
                $h.stop().animate({
                    'left': $(this).offsetParent().context.offsetLeft //context 在1.10中已经弃用
                }, con);
                console.log($(this))
                console.log($(this).offsetParent())
                console.log($(this).offsetParent().context)
            }, function () {
//              $h.stop().animate({
                    'left': '0'
                }, con);
            })
        }
    });
}(jQuery));

　这些事很长多网站常见的小功能，不要觉得很简单，有时要用时直接copy ，还是省时间的