所以我们学到了三个东西：
1.回顾一次CSS：
定位的时候 记住了！ 绝对定位和相对定位 的参照是谁 特别是绝对定位的参照要注意，是生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
还有就是 pointer-events: none; CSS 的这个属性 他是直接可以忽略事件的发生的！！！ 具体百度吧！！ 但是这个很有必要知道!!!
2.一些jq的动画啊 还有就是 stop 和 finsh 的应用,这些要会用即可,emmmm 还有一下事件,那些也一样要会知道会用即可.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BiHu导航</title>
<script src="jqsourse.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
width: 1000px;
height: 50px;
margin: 30px auto;
border-bottom: 3px solid #1fd6be;
position: relative;
}
ul > li {
list-style: none;
width: 100px;
height: 50px;
float: left;
cursor: pointer;
text-align: center;
line-height: 50px;
}
ul > span {
width: 100px;
height: 50px;
position: absolute;
text-align: center;
line-height: 50px;
background-color: #1fd6be;
border-bottom: solid red 3px;
left: 0;
color: #fff;
cursor: pointer;
/* 不作为事件目标
* 会直接忽略他的事件
*/
pointer-events: none;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>咨询</li>
<li>体育</li>
<li>政治</li>
<li>本地</li>
<li>游戏</li>
<li>电子</li>
<li>科技</li>
<li>经济</li>
<li>音乐</li>
<span>首页</span>
</ul>
<script>
//鼠标放上去时 我就动画跑起来
$('li').stop().on('mouseover',function () {
$('span').animate({
left:$(this).index() * 100
},100,'linear').text($(this).text());
}
);
//鼠标点击时 我就打印自己的内容
$('li').on('click',function (){
alert($(this).text())
});
//如果离开li的话 那我span我就直接完成到最后那次移动
$('li').mouseout(function (){
$('span').finish();
});
</script>
</body>
</html>
作者：咸瑜
