列表-筋斗云

Posted 2021-02-21 strongerpian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了列表-筋斗云相关的知识，希望对你有一定的参考价值。

效果：筋斗云默认在第一个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>

以上是关于列表-筋斗云的主要内容，如果未能解决你的问题，请参考以下文章