jQuery下划线跟随导航菜单
jQuery下划线跟随导航菜单
羊皮卷 发表于1年前
jQuery下划线跟随导航菜单
  • 发表于 1年前
  • 阅读 23
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: animation动画实现

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下划线跟随导航菜单</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
        *{margin:0;padding:0;}
#navBg{background-color: #888;padding:20px;}
/* container */
#container{width:945px;height:50px;position:relative;overflow:hidden;margin:auto;font-family:Microsoft YaHei,Segoe UI,Tahoma,Arial,Verdana,sans-serif;}
#container li{display:block;float:left;width:133px;height:50px;background:url(../images/transparent.png);line-height:50px;padding-right:2px;line-height:50px;list-style:none;}
#container li a{color:#fff;text-decoration:none;display:block;position:relative;background:#999;width:123px;height:50px;padding-right:10px;font-size:18px;font-weight:bold;text-align:right;}
#container li a:hover,#container li a.active{background:#777;}
#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);}
#block{position:absolute;width:133px;height:2px;background:#e9d008;bottom:0px;left:0px;}

</style>
</head>
<body>

<div id="navBg">
     <div id="container">
    <ul id="nav">
      <li><a class="active" href="#">111<span>1111</span></a></li>
          <li><a href="#">22<span>22</span></a></li>
          <li><a href="#">33<span>33</span></a></li>
          <li><a href="#">55<span>55</span></a></li>
          <li><a href="#">77<span>77</span></a></li>
          <li><a href="#">88<span>88</span></a></li>
          <li><a href="#">99<span>99</span></a></li>
    </ul>
    <div id="block"></div>
    </div>
</div>

<!--如果用了参数
<script type="text/javascript">
$.nicenav(300);
</script>-->


<script>
//如果没用参数:
$(function(){
    $('#nav>li').hover(function () {
        $('#block').stop().animate({
            'left': $(this).offsetParent().context.offsetLeft
        },500);
    }, function () {
        $('#block').stop().animate({
            'left': '0'
        },500);
    })
});
</script>


<!--
如果用了参数要在底部引用外部js文件函数
<js type="text/javascript">
$.bocknav(500);
</js>

 (function ($) {
    $.extend({
        'bocknav': function (blo) {
            blo = typeof blo === 'number' ? blo : 400;
            var $lis = $('#nav>li'), $h = $('#buoy')
            $lis.hover(function () {
                $h.stop().animate({
                    'left': $(this).offsetParent().context.offsetLeft
                }, blo);
            }, function () {
                $h.stop().animate({
                    'left': '-157px'
                }, blo);
            })
        }
    });
}(jQuery));
-->
</body>
</html>


 

共有 人打赏支持
粉丝 3
博文 90
码字总数 25228
×
羊皮卷
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: