<!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 ，还是省时间的