<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } body { background-color: #333; } .nav { width: 800px; height: 42px; margin: 100px auto; background: url(images/rss.png) right center no-repeat; background-color: #fff; border-radius: 10px; position: relative; } .nav li { width: 83px; height: 42px; text-align: center; line-height: 42px; float: left; cursor: pointer; } .nav span { position: absolute; top: 0; left: 0; width: 83px; height: 42px; background: url(images/cloud.gif) no-repeat; } ul { position: relative; } </style> </head> <body> <div class="nav"> <span id="cloud"></span> <ul id="navBar"> <li>北京校区</li> <li>上海校区</li> <li>广州校区</li> <li>深圳校区</li> <li>武汉校区</li> <li>关于我们</li> <li>联系我们</li> <li>招贤纳士</li> </ul> </div> <script src="common.js"></script> <script> //获取所有的li注册鼠标进入、离开、点击事件 var list = my$("navBar").children; for(var i = 0; i < list.length; i++) { list[i].onmouseover = mouseoverHandle; list[i].onclick = clickHandle; list[i].onmouseout = mouseoutHandle; } //鼠标进入事件 var left = 0; function mouseoverHandle() { animate(my$("cloud"), this.offsetLeft); } //鼠标点击事件 function clickHandle() { left = this.offsetLeft; } //鼠标离开事件 function mouseoutHandle() { animate(my$("cloud"), left); } //匀速动画 function animate(element, target) { //清理定时器 clearInterval(element.timeId); element.timeId = setInterval(function () { //获取元素的当前位置 var current = element.offsetLeft; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style.left = current + "px"; if (current == target) { //清理定时器 clearInterval(element.timeId); } //测试代码: console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step); }, 20); } </script> </body> </html>
用到的图片
