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