找回密码
当前位置：前端开发者 > jQuery > 正文

jq 前端效果_鼠标悬停导航下划线滑出效果

2018-07-31 分类：jQuery / Node.js 阅读(929) 评论(0)

微信前端开发框架weui|前端开发免费视频教程|前端移动端开发1px

html 代码

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″>
    <title>jquery鼠标悬停导航下划线滑出效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .header {
            width: 100%;
            background: #3E4147;
            height: 50px;
        }
        .logo {
            float: left;
            height: 50px;
            margin: 0 25px;
        }
        .logo img {
            display: block;
            width: 60px;
            height: 40px;
            float: left;
            margin: 5px 0;
        }
        .logo span {
            display: block;
            float: left;
            font-size: 22px;
            color: #fff;
            line-height: 50px;
            margin-left: 15px;
            cursor: pointer;
        }
        .nav {
            width: 767px;
            height: 50px;
            float: left;
            overflow: hidden;
        }
        .nav ul {
            width: 767px;
            height: 50px;
        }
        .nav ul li {
            height: 30px;
            line-height: 30px;
            float: left;
            padding: 10px 5px;
            margin: 0px 5px;
            position: relative;
        }
        .nav ul li a {
            color: #cbcbcb;
            font-family: ‘Microsoft Yahei’;
            font-size: 14px;
            text-decoration: none;
        }
        .nav ul li a:hover {
            color: #6bc30d;
        }
        .nav ul li span {
            display: block;
            position: absolute;
            width: 0px;
            height: 0px;
            background: #6bc30d;
            top: 48px;
            left: 50%;
        }
    </style>
    <script src=”http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js”></script>
</head>
<body>
    <div class=”header”>
        <div class=”logo”>
            <img src=”//cdn.attach.qdfuns.com/notes/pics/201611/16/113204iicl2cn9ynu9uznd.png” alt=””>
            <span>前端网</span>
        </div>
        <div class=”nav”>
            <ul>
                <li>
                    <a href=”javascript:;”>HTML/css</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>JavaScript</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>node.js</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>手机移动</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>前端安全</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>性能优化</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>类库框架</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>开发调试</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>浏览器</a>
                    <span></span>
                </li>
                <li>
                    <a href=”javascript:;”>面试经验</a>
                    <span></span>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(function () {
            $(‘.nav li’).hover(function () {
                $(this).find(‘span’).stop().css(‘height’, ‘2px’);
                $(this).find(‘span’).animate({
                    left: ‘0’,
                    width: ‘100%’,
                }, 200);
            }, function () {
                $(this).find(‘span’).stop().animate({
                    left: ‘50%’,
                    width: ‘0’
                }, 200);
            });
        });
    </script>
</body>
</html>

web前端开发案例教程 pdf|中国移动校招有前端开发吗|移动web前端开发总结

赞(0)
前端开发者 » jq 前端效果_鼠标悬停导航下划线滑出效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论