Tab-筋斗云
效果：筋斗云默认在第一个li，自动运动到鼠标移入的li，固定到鼠标点击的li，鼠标移出时返回到上次点击的li
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: #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(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: 88px; 36 height: 42px; 37 line-height: 42px; 38 text-align: center; 39 color: #000; 40 cursor: pointer; 41 } 42 </style> 43 <script src="../../utils.js"></script> 44 </head> 45 <body> 46 <div class="nav" id="nav"> 47 <span class="cloud" id="cloud"></span> 48 <ul id="box"> 49 <li>首页新闻</li> 50 <li>教育师资</li> 51 <li>活动策划</li> 52 <li>企业文化</li> 53 <li>招聘信息</li> 54 <li>公司简介</li> 55 <li>上海校区</li> 56 <li>广州校区</li> 57 </ul> 58 </div> 59 <script> 60 var cloud = document.querySelector('#cloud') 61 var list = document.querySelectorAll('#box li') 62 // 循环遍历list，但是如果普通for拿不到li的下标 63 // Array.from() 可以将类数组对象转换成数组 64 var arrList = Array.from(list) 65 console.log(list) 66 console.log(arrList) 67 var i = 0 // 默认云的位置在第0个 68 arrList.forEach((li, index) => { 69 // forEach每循环一次都是一个函数，每个函数里都有一个自己的index，所以可以直接使用 70 // var变量或者函数参数之于函数相当于let变量之于块级 71 li.onmouseenter = function () { 72 console.log(index) 73 // 让这朵云运动到当前li的坐标位置 74 utils.move1(cloud, 'left', this.offsetLeft) 75 } 76 77 li.onclick = function () { 78 // 这里没有云的移动，这里只是负责记录点击的位置也就是下标 79 // 记录云所要回到的位置 80 i = index 81 } 82 83 li.onmouseleave = function () { 84 // 让cloud回到上一次点击的位置，按照click里面记录的下标来移动 85 utils.move1(cloud, 'left', arrList[i].offsetLeft) 86 } 87 88 }) 89 </script> 90 </body> 91 </html>
