2019-8-22 jquery下划线跟随导航偏移

Original 2019-08-22 14:32:22 549
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>下划线跟随导航</title><script src="https://code.jquery.com/jquery-3.4.1.js"></script&g

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>下划线跟随导航</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<style>

body{

margin:0;

}

li{

list-style:none;

}

ul{

padding:0;

width:600px;

height:44px;

background:#000;

margin:0 auto;

            position: relative;

}

a{

text-decoration: none;

color:#fff;

}

.item{

width:120px;

height: 44px;

float: left;

text-align: center;

line-height: 44px;

}

        .box{

            width:120px;

            height:2px;

            background-color: #dc4900;

            border-radius: 1px;

            position: absolute;

            bottom: 0;

        }


</style>

</head>

<body>

<script>

$(document).ready(function(){

$('li').hover(function(){

                // 通过name值获取位移距离

                $x = parseInt($(this).attr('name'))*120;

                // stop在当前位置停止,根据下一步指令进行位置偏移,若不加则每一步都从初始位置偏移

                $('.box').stop().animate({left:$x+'px'},300)

            },

            function(){

                $('.box').stop().animate({left:'0px'},300)

            }

            )

})

</script>

    <ul>

        <li name="0"><a href="">导航01</a></li>

        <li name="1"><a href="">导航02</a></li>

        <li name="2"><a href="">导航03</a></li>

        <li name="3"><a href="">导航04</a></li>

        <li name="4"><a href="">导航05</a></li>

        <div></div>

    </ul>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-08-22 15:35:18
Teacher's summary:这个动画的实现原理非常 的简单的就是一个自定义动画

Release Notes

Popular Entries