前端开发 导航底部滑块特效

移动前端开发百度网盘|前端开发移动端问题|前端 chrome 开发插件

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>手机前端快速开发框架:底部导航滑块效果</title>
    <link rel=”stylesheet” href=”css/reset.css” />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        ul {
            list-style-type: none;
        }
        a:focus,
        button:focus,
        input:focus,
        textarea:focus {
            outline: 0;
        }
        img {
            border: 0;
        }
        /*设置默认div的宽度为100%,高度自动,并且可以追加类名添加背景颜色或图片, 最后清除浮动*/
        .container {
            width: 100%;
            height: auto;
        }
        .container:after {
            content: “”;
            height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }
        /*设置居中效果,并且赋予最小宽度,解决:拉伸浏览器时,挤压元素*/
        .wrapper {
            margin: 0 auto;
            width: 90%;
            min-width: 1240px;
            height: auto;
            position: relative;
        }
        nav {
            width: 600px;
            margin: 0 auto;
        }
        .nav-list {
            width: 100%;
            list-style-type: none;
        }
        .nav-list li {
            display: inline-block;
            margin: 5px;
            width: 90px;
            float: left;
        }
        .nav-list li a {
            display: block;
            text-align: center;
            font-size: 16px;
            color: #0DAF90;
        }
        .slidenav {
            margin-top: 10px;
            width: 100%;
            height: 3px;
            float: left;
            box-sizing: border-box;
            box-shadow: 0 1px 10px #ccc;
        }
        .slide-span {
            border-bottom: 3px solid #0daf90;
            box-shadow: 2px 2px 10px #0DAF90;
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class=”container”>
        <div class=”wrapper”>
            <nav>
                <ul class=”nav-list” id=”nav-list”>
                    <li class=”nav-current”>
                        <a href=”#”>
                            <span class=”nav-span”>导航0</span>
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            <span class=”nav-span”>导航1</span>
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            <span class=”nav-span”>导航2</span>
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            <span class=”nav-span”>导航3</span>
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            <span class=”nav-span”>导航4</span>
                        </a>
                    </li>
                    <li>
                        <a href=”#”>
                            <span class=”nav-span”>导航5</span>
                        </a>
                    </li>
                </ul>
                <div class=”slidenav”>
                    <span class=”slide-span”></span>
                </div>
            </nav>
        </div>
    </div>
</body>
<script type=”text/javascript” src=”http://libs.baidu.com/jquery/1.11.1/jquery.min.js”></script>
<script>
    $(function () {
        var slideli = $(“.nav-current”).index() * 100;
        $(“.slide-span”).css({
            “margin-left”: slideli
        }, 500);
        $(“nav ul li a”).hover(function () {
            var slidelistart = $(this).parents().index();
            var slideli = ($(this).parents().index()) * 100;
            $(“.slide-span”).stop().animate({
                “margin-left”: slideli
            }, 500);
        }, function () {
            var slideli = $(“.nav-current”).index() * 100;
            $(“.slide-span”).stop().animate({
                “margin-left”: slideli
            }, 500);
        })
    })
</script>
</html>

web前端开发华为招聘|前端开发调用本地摄像头的插件|天津前端开发招聘信息

» 本文来自:前端开发者 » 《前端开发 导航底部滑块特效》
» 本文链接地址:https://www.rokub.com/4948.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!