第十四节（项目实战4-导航） 

<style type="text/css">
            *{margin:0;padding:0;}
            body{font-size:12px;font-family:"微软雅黑";color:#666;}
            .nav{width:1190px;height:36px;margin:150px auto;
                border-bottom:3px solid #E6E6E6;
                position:relative;
            }
            .nav ul li{list-style:none;float:left;width:80px;height:30px;
                text-align:center;line-height:30px;
            }
            .nav ul li a{text-decoration:none;color:#000;font-size:16px;}
            .nav .sel{width:80px;border-bottom:3px solid #000;
                position:absolute;left:0;bottom:-3px;
            }

</style>


<body>

    <div class="nav">
        <ul id="n_ul">
            <li><a href="#">首页</a></li>
            <li><a href="#">编程开发</a></li>
            <li><a href="#">职业技能</a></li>
            <li><a href="#">网络营销</a></li>
            <li><a href="#">IT设计</a></li>
            <li><a href="#">生活百科</a></li>
            <li><a href="#">英语教程</a></li>
            <li><a href="#">泰语教程</a></li>
            <li><a href="#">投资理财</a></li>
            <li><a href="#">时尚健康</a></li>
            <li><a href="#">公务员</a></li>
            <li><a href="#">财会教程</a></li>
            <li><a href="#">工程教程</a></li>
            <li><a href="#">其 它</a></li>
        </ul>
        <p class="sel"></p>

    </div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    
    $("#n_ul").find("li").hover(function(){
        // 计算导航外边框距离左侧的距离（根据浏览的大小动态变化的值）
        var auto_left = ($(window).width() - 1190) / 2;
        // 选中当前距离div 盒子的左侧的距离 left:的值;
        var _left = $(this).offset().left - auto_left;
        $(".nav").find(".sel").stop();
        // 创建动画函数
        $(".nav").find(".sel").animate({left:_left},100);
    });

</script>

</body>




 






		

		
posted @ 
2015-01-25 10:08 
哥的笑百度不到 
阅读(127) 
评论(0) 
 
收藏 
举报