返回jquery导......登陆

jquery导航

关超2019-04-25 18:20:07233
<html>
<head>
    <meta charset="utf-8">
    <title>jquery动画导航</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#nav li").stop().animate({'marginLeft':'-65px'},1000);
            $("li").hover(function(){
                $(this).stop().animate({'marginLeft':'-2px'},500);
            },function(){
                $(this).stop().animate({'marginLeft':'-65px'},500);
            })
        })
    </script>
</head>
<body>

<ul id="nav">
    <li class="li1"><span class="fa fa-mobile"></span></li>
    <li class="li2"><span class="fa fa-user-circle"></span></li>
    <li class="li3"><span class="fa fa-address-card-o"></span></li>
    <li class="li4"><span class="fa fa-snowflake-o"></span></li>
    <li class="li5"><span class="fa fa-podcast"></span></li>
    <li class="li6"><span class="fa fa-image"></span></li>
</ul>

</body>
</html>


*{margin: 0px ; padding: 0px}
ul{ list-style: none;}

ul li{ text-align:center;width: 80px; height: 80px; margin: 15px 0 0 0; border:0px solid #ccc; line-height: 80px; border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.li1{background: rgba(255,152,60,0.5)}
.li2{background: rgba(59,75,255,0.5)}
.li3{background: rgba(26,245,175,0.5)}
.li4{background: rgba(232,33,185,0.5)}
.li5{background: rgba(229,245,100,0.5)}
.li6{background: rgba(240,147,15,0.5)}

span{font-weight: 900;font-size: 100px;color: #fff;}


奇怪,为什么font awesome 通过font-size 跟 font-weight 调整不大呢?

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送