WEB前端tab标签页滑动效果

前端开发需要美术功底吗 学前端开发需要学哪些、 前端需要搭建开发环境吗
tab标签页切换在各个网站太常见了,这里介绍一种滑动的效果

html 代码片段

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <link rel=”stylesheet” type=”text/css” href=”http://static.woniu.com/stylesheets/base.css” />
    <title></title>
</head>
<style type=”text/css”>
    li {
        list-style: none;
    }
    .tab {
        height: 55px;
        position: relative;
        width: 500px;
        margin: 0 auto;
    }
    .tab ul li {
        cursor: pointer;
        padding-top: 15px;
        font: normal 16px/1.5 “microsoft yahei”;
        text-align: center;
        width: 70px;
        height: 40px;
        background: #eeeeee;
        float: left;
    }
    .tab ul li:hover {
        font-size: 17px;
    }
    .curline {
        display: block;
        width: 70px;
        height: 3px;
        background: #766cca;
        position: absolute;
        bottom: 0px;
    }
</style>
<body>
    <div class=”tab”>
        <ul>
            <li>综合</li>
            <li>新闻</li>
            <li>活动</li>
            <li>公告</li>
            <li>媒体</li>
        </ul>
        <span class=”curline”></span>
    </div>
    <script src=”http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>
    <script type=”text/javascript”>
        $(function () {
            var liWidth = $(‘.tab ul li’).eq(0).width();
            $(‘.tab ul li’).hover(function () {
                $(‘.curline’).stop();
                var liIndex = $(this).index();
                $(‘.curline’).animate({
                    left: liWidth * liIndex + ‘px’
                });
            })
        })
    </script>
</body>
</html>

前端开发需要学几年 web前端开发需要切图吗 web前端开发需要掌握哪些

» 本文来自:前端开发者 » 《WEB前端tab标签页滑动效果》
» 本文链接地址:https://www.rokub.com/5874.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!