返回下划线滑动效果...登陆

下划线滑动效果

Kevin King2019-06-07 02:04:10115

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>下划线滑动效果</title>

<script type="text/javascript" src="jquery-3.4.1.js"></script>

<style type="text/css">

*{margin: 0;padding: 0;}

ul{list-style: none;font-size: 20px;}

li{width: 200px;line-height: 40px;background-color: #AF3434;float: left;text-align: center;color: #FFF;}

#box{width: 1000px;margin: 20px auto;box-shadow: 0 2px 10px #000;height: 40px;position: relative;}

.line{width: 200px;height: 2px;background-color: #FFF;position: absolute;margin-top: 38px;}

</style>

<script type="text/javascript">

$(function(){

$('li').hover(

function(){

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

$('.line').stop().animate({left:$x+'px'},200)

},

function(){

$('.line').stop().animate({left:'0px'},200)

}

)

})

</script>

</head>

<body>

<div id="box">

<ul>

<li name='0'>导航一</li>

<li name='1'>导航二</li>

<li name='2'>导航三</li>

<li name='3'>导航四</li>

<li name='4'>导航五</li>

</ul>

<div class="line"></div>

</div>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

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