导航栏 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 { width: 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; width: 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); width: 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; width: 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 ，还是省时间的