需求1:鼠标放到哪个li上面，span对应移动到该li上，移开后，回到原位置
需求2:鼠标点击哪个li记录该li标签，移开的时候span回到该记录的li标签上
注意点:记录标签要用到计数器，筋斗云运动的时候，要用到缓动动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>筋斗云案例</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
body{
background: #464545;
}
ul{
list-style:none;
position: absolute;
}
li{
float: left;
width: 85px;
line-height: 40px;
text-align: center;
padding-right: 10px;
}
.box{
width: 800px;
height: 40px;
background: #fff url("../images/wifi.png") right center no-repeat;
margin: 200px auto;
border-radius: 10px;
position: relative;
}
span{
width: 85px;
height: 40px;
background: url("../images/cloud.gif") no-repeat;
position: absolute;/*要移动的话，就必须定位*/
left: 0px;
}
</style>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广东校区</li>
<li>山东校区</li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
//需求1:鼠标放到哪个li上面，span对应移动到该li上，移开后，回到原位置
//需求2:鼠标点击哪个li记录该li标签，移开的时候span回到该记录的li标签上
//步骤:
//1.获取数据源和相关元素
//2.绑定事件’
//3.书写驱动程序
//让计数器记录li标签
var liArr = document.getElementsByTagName("li");
var liWidth = liArr[0].offsetWidth;
var span = document.getElementsByTagName("span")[0];
//for循环绑定事件
//需求1
for (var i = 0; i < liArr.length; i++) {
//自定义属性，然后绑定index属性为索引值
liArr[i].index = i ;
//定义一个计数器
var count = 0;
//鼠标移入的时候，span进入
liArr[i].onmouseover = function(){
//让span运动到该li的索引值的位置
//图片运动需要用到封装的方法
animate(span,this.index*liWidth);
}
//鼠标移开的时候，span恢复原位
liArr[i].onmouseout = function(){
animate(span,count*liWidth);
}
//点击事件，记录功能
liArr[i].onclick = function(){
//需要一个计数器，每次点击以后把所有值记录下来
//因为onmouseout事件要用到这个计数器，所以应该是一个全局变量
count = this.index;
animate(span,count*liWidth);
}
}
function animate(ele,target){
//要用定时器，先清定时器
clearInterval(ele.timer);
ele.timer=setInterval(function(){
//缓动动画
//步长=(目标位置-自身位置)的十分之一
//因为offset本身就带有四舍五入的功能，所以值会有误差
// 解决方案:最后10px，要1px 1px的往前移动，这样就能达到指定位置
var steep = (target - ele.offsetLeft)/10;
// steep = Math.ceil(steep);//将步长向上取整，这样步长就不会是小数点的值了
steep = target>ele.offsetLeft?Math.ceil(steep):Math.floor(steep);
//盒子未来的位置=盒子当前位置+步长
ele.style.left = ele.offsetLeft + steep +"px";
//跳出条件:目标位置-当前位置的绝对值，小于步长
if (Math.abs(target-ele.offsetLeft)<Math.abs(steep)) {
clearInterval(ele.timer);
}
},15);
}
}
</script>
</body>
</html>