返回2019-8-......登陆

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

辰晨2019-08-22 14:32:2213

<!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>


最新手记推荐

• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade• 创建一个验证器, 用来对模型对应的表中字段进行验证处理

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网