摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航条跟随</title><script type="text/javascript" src="jquery-3.3.1.min.js">&l
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条跟随</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px}
ul li{list-style: none}
ul{z-index:20;position:relative;font-size: 15px;}
li {cursor:pointer;width:120px;height: 36px;float:left;text-align:center;line-height:36px;color: #fff;font-weight: bold;}
.menu{width:600px;position:relative;margin:60px auto;height:38px;background: #0078D7;border-radius:3px }
.current{z-index:20;width:120px;height: 38px;background-color: lightblue;position:absolute;top:0px;}
</style>
</head>
<body>
<div>
<div></div>
<ul>
<li name="0" >导航01</li>
<li name="1">导航02</li>
<li name="2">导航03</li>
<li name="3">导航04</li>
<li name="4">导航05</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*120
$('.current').stop().animate({left:$x+'px'},300)
},
function(){
$('.current').stop().animate({left:'0px'},300)
}
)
//操作点击停止效果怎么做？
// $('li').click(function(){
// $x=parseInt($(this).attr('name'))*120
// $(this).css('left',$x);
// })
})
// $(function () {
// var $active = $(".active");
// var $active_w = $active.innerWidth();
// var $active_l = $active.position().left;
// var $animate_block = $(".current");
// //设置滑块初始位置
// $(".current").css({width:$active_w,left:$active_l});
// //a事件
// $("ul>li").hover(function () {
// var index = $(this).index();
// var $a_cur = $("ul li").eq(index);
// var width = $a_cur.innerWidth();
// var left = $a_cur.position().left;
// $(".current").stop().animate({width:width,left:left});
// },function () {
// $(".current").stop().animate({width:$active_w,left:$active_l});
// });
// });
</script>
</html>
批改老师：灭绝师太批改时间：2019-03-19 09:16:03
老师总结：完成的不错,点击停止给个stop()就可以了
