<script>
window.onload = function () {
//需求：鼠标放到哪个li上面，span就移动到那个上面。移开，回到原来的位置。点击的话，固定到点击的位置。
//步骤：
//1.老三步。
//2.鼠标放到那个li,移动到上面。
//3.鼠标移开,回到原来位置。
//4.点击的话，固定到点击的位置。
//1.老三步。
var span = document.getElementsByTagName("span")[0];
var liArr = document.getElementsByTagName("li");
//计数器思想
var current = 0;
for(var i=0;i<liArr.length;i++){
//2.鼠标放到那个li,移动到上面。
liArr[i].onmouseover = function () {
animate(span,this.offsetLeft);
}
//3.鼠标移开,回到原来位置。
liArr[i].onmouseout = function () {
//鼠标移开，移动到之前记录好的位置。（初始值为0）
animate(span,current);
}
//4.点击的话，固定到点击的位置。
liArr[i].onclick = function () {
//点击li之后，把li距离ul左侧的距离记录给current.
current = this.offsetLeft;
animate(span,this.offsetLeft);
}
}
}
//缓动框架
function animate(obj,target){
//要用定时器，先清定时器（定时器最好绑定在要移动的盒子上）
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//3.缓动公式
//获取步长
var step = (target-obj.offsetLeft)/10;
//处理步长，让他<0下取整，>0向上取整。这样，我们能够取到-1和1.
step = step>0?Math.ceil(step):Math.floor(step);
obj.style.left = obj.offsetLeft+step+"px";
//运动到指定位置
if(target==obj.offsetLeft){
clearInterval(obj.timer);
}
},14)
}
</script>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>师资力量</li>
<li>活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>xx校区</li>
<li>xx校区</li>
</ul>
</div>
