<!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>
