下划线滑动效果

原创 2019-06-07 02:04:10 202
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>下划线滑动效果</title> <script type="text/javascript" src="jquery-3.4.1.js">&

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


批改老师:查无此人批改时间:2019-06-10 09:27:52
老师总结:完成的不错。每行js和jq语句结束增加;号。继续加油

发布手记

热门词条