案例：筋斗云
鼠标进入，一朵云的样式跟随鼠标移动，鼠标点击后离开，云样式回到上次点击的位置
<!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> //获取云彩 var cloud = my$("cloud"); //获取所有的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; } function mouseoverHandle() { //进入 //移动到鼠标此次进入的li的位置 animate(cloud, this.offsetLeft); } //点击的时候，记录此次点击的位置 var lastPosition = 0; function clickHandle() {//点击 lastPosition = this.offsetLeft; } function mouseoutHandle() {//离开 animate(cloud, lastPosition); } </script> </body> </html>