<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: rgba(0, 0, 0, 0.8);
}
.box {
width: 800px;
height: 42px;
background: #fff url("images/wifi.png") right center no-repeat;
margin: 200px auto;
border-radius: 8px;
position: relative;
}
ul {
list-style: none;
position: relative;
}
li {
float: left;
width: 83px;
height: 42px;
text-align: center;
font: 500 16px/42px "simsun";
cursor: pointer;
}
span {
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background: url("images/cloud.gif") no-repeat;
}
</style>
<script>
window.onload = function () {
//需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
//需求2：鼠标点击那个li记录该li标签，移开的时候span回到该记录的li标签上。
//步骤：
//1.老三步
//2.计数器
//需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
//1.老三步
var liArr = document.getElementsByTagName("li");
var liWidth = liArr[0].offsetWidth;
var span = document.getElementsByTagName("span")[0];
//计数器
var count = 0;
//for循环绑定事件
for(var i=0;i<liArr.length;i++){
//自定义属性，然后绑定index属性为索引值
liArr[i].index = i;
//鼠标进入事件
liArr[i].onmouseover = function () {
//让span运动到该li的索引值位置
//图片运动需要封装的方法
animate(span,this.index*liWidth);
}
//鼠标移开
liArr[i].onmouseout = function () {
//让span运动到该li的索引值位置
//图片运动需要封装的方法
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 () {
var step = (target-ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},18);
}
}
</script>
</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>
</body>
</html>