[ Javascript 仿阿里云首页导航下划线效果 ]

用到了CSS3的 [transition] 动画效果

demo只是高仿的效果,阿里前端写出来的效果貌似比我写出来的感觉好点[心塞]…

<nav class="navigation" role="navigation">
  <ul class="primary-nav">
    <li><a href="index.html" class="page-scroll">首页</a></li>
    <li><a href="#PlantForm" class="page-scroll">平台介绍</a></li>
    <li><a href="#PowerFul" class="page-scroll">服务内容</a></li> 
    <li><a href="#Safety" class="page-scroll">服务模式</a></li>
    <li><a href="#Customer" class="page-scroll">合作伙伴</a></li>
    <li><a href="#Future" class="page-scroll">服务申请</a></li>
    <li><a href="#AboutUs" class="page-scroll">关于我们</a></li>
    <div class="line"> // 下划线</div> 
  </ul>
</nav>

ul, ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navigation li {
    cursor: pointer;
    display: inline-block;
}
.navigation a {
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
    text-decoration:none;
    text-transform:uppercase;
}
/* 下划线部分 */
.navigation div.line{
    position:absolute;
    width:0;
    height:2px;
    left:0;
    bottom:0;
    background:#fff;
    -webkit-transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    function UnderLine(){
        var $navli = $(".primary-nav li");
        $navli.mouseover(function(){
            var $this = $(this);
            var $line = $(".primary-nav .line");
            $line.css({
                width: $this.outerWidth()-12, //下划线的长度可根据padding值调整
                left: $this.position().left + 6
            })
        }).mouseout(function() {
            var $this = $(this);
            var $line = $(".primary-nav .line");
            $line.css({
                width: 0,
                left: $this.position().left + 6 
            })
        })
    }UnderLine();
</script>

Css, Javascript — Nov 2, 2017