现在的位置: 首页 > div+css > 正文
jquery效果小试
2014年01月21日 div+css ⁄ 共 1839字 暂无评论

<html>
<script src="http://lgytraining.com.au/js/jquery-1.8.2.js"></script>
<script>
 
  //导航

    $(function () {
        $('#nav li a').hover(function () {
            var w = $(this).width();
            $(this).children('i').css({ 'width': w });
            $(this).children('i').stop().animate({ 'top': 0 },300);
        }, function () {
            $(this).children('i').stop().animate({ 'top': -65 },200);

        })
    })
</script>
<style>

#header #nav {
    height: 65px;
    overflow: hidden;
}
#header #nav li {
    float: left;
    margin-left: 1px;
}
#header #nav li a {
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    height: 65px;
text-decoration: none;
    padding: 0 18px;
    position: relative;
}
#header #nav li a i {
    background: none repeat scroll 0 0 #448808;
    height: 65px;
    left: 0;
    padding: 0 18px;
    position: absolute;
    top: -65px;
}
#header #nav li a b {
    font-weight: normal;
    line-height: 90px;
    position: relative;
    z-index: 2;
}
#header #nav li a.current {
    background: none repeat scroll 0 0 #448808;
}
#header #nav li a i {
    background: none repeat scroll 0 0 #448808;
    height: 65px;
    left: 0;
    padding: 0 18px;
    position: absolute;
    top: -65px;
}

</style>
<body bgcolor='black'>
<div id="header" >
<ul id="nav" class="fr">
                <li><a href="Default.aspx"><i style="width: 32px; top: -65px;"></i><b>首页</b></a></li>
                <li><a href="about.aspx"><i style="width: 64px; top: -65px;"></i><b>关于立恒</b></a></li>
                <li><a href="course.aspx"><i style="width: 64px; top: -65px;"></i><b>课程介绍</b></a></li>
                <li><a href="share.aspx"><i style="width: 64px; top: -65px;"></i><b>成功分享</b></a></li>
                <li><a href="service.aspx"><i style="width: 64px; top: -65px;"></i><b>项目服务</b></a></li>
                <li><a href="online.aspx"><i style="width: 64px; top: -65px;"></i><b>在线报名</b></a></li>
                <li><a href="contact.aspx"><i style="width: 64px; top: -65px;"></i><b>联系我们</b></a></li>
                <li><a href="http://lgyaccountant.com.au/bbs/forum.php"><i style="width: 32px; top: -65px;"></i><b>论坛</b></a></li>
          </ul>  
</div>
</body>
</html>

给我留言

您必须 [ 登录 ] 才能发表留言!

×