1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{margin: 0; padding: 0;} 8 ul {list-style:none;} 9 body { 10 background-color: #000; 11 } 12 .nav { 13 width: 800px; 14 height: 42px; 15 background:url("images/rss.png") no-repeat right center #fff; 16 margin: 100px auto; 17 border-radius: 5px; 18 position: relative; 19 } 20 .cloud { 21 width: 83px; 22 height: 42px; 23 position: absolute; 24 top: 0; 25 left: 0; 26 background: url(images/cloud.gif) no-repeat; 27 } 28 .nav ul { 29 position: absolute; 30 top: 0; 31 left: 0; 32 } 33 .nav li { 34 float: left; 35 width: 83px; 36 height: 42px; 37 line-height: 42px; 38 text-align: center; 39 color: #000; 40 cursor: pointer; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="nav" id="nav"> 46 <span class="cloud" id="cloud"></span> 47 <ul> 48 <li>首页新闻</li> 49 <li>师资力量</li> 50 <li>活动策划</li> 51 <li>企业文化</li> 52 <li>招聘信息</li> 53 <li>公司简介</li> 54 <li>上海校区</li> 55 <li>广州校区</li> 56 </ul> 57 </div> 58 </body> 59 </html> 60 <script> 61 var cloud = document.getElementById("cloud"); // 云彩 62 var nav = document.getElementById("nav"); 63 var lis = nav.children[1].children; 64 var current = 0; // 用于存放点击时候的 offsetLeft 65 //alert(lis.length); 66 // 2.循环遍历li 67 for(var i=0; i<lis.length;i++) { 68 lis[i].onmouseover = function() { 69 // alert(this.offsetLeft); 70 target = this.offsetLeft; // 把左侧的位置 ，给 target 71 }; 72 lis[i].onmouseout = function() { 73 target = current; // 鼠标离开 target 是 刚才我们点击的位置 74 }; 75 lis[i].onclick = function() { 76 current = this.offsetLeft; // 点击的时候 吧当前位置 存贮一下 77 } 78 } 79 //1. 缓动公式开启定时器 80 var leader = 0, target = 0; 81 setInterval(function(){ 82 leader = leader + (target - leader ) / 10; 83 cloud.style.left = leader + "px"; 84 },10); 85 </script>
结构： 1.右边的信号是大盒子的背景图；
2.大盒子里面有一个云彩盒子，一个ul盒子；
3.云彩盒子的z-index降低；
4.移动的盒子一般是通过定位得到的；