JS之筋斗云案例
需求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>