学生に教えるために、jsで書いたまねるtaobaoの分類メニューの効果
48466 ワード
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title> taobao ---- </title>
6 <style type="text/css">
7 #top,#content,#foot{
8 width:998px;
9 margin:auto;
10 }
11 #top{
12 height:240px;
13 }
14 #content{
15 height:2000px;
16 }
17 #foot{
18 height:120px;
19 }
20 #mainMenuArea{
21 margin-top:25px;
22 width:240px;
23 float:left;
24 margin-left:1px;
25 height:auto;
26 }
27 #mainMenuArea div{
28 font-size: 12px;
29 line-height:23px;
30 padding-left:15px;
31 border:solid 2px #fff;
32 }
33 #mainMenuArea div.hover{
34 border-left-color: red;
35 border-top-color: red;
36 border-bottom-color: red;
37 position: relative;
38 z-index:101;
39 }
40 #mainMenuArea div a{
41 text-decoration: none;
42 color:#000;
43 display:inline-block;
44 width:40px;
45 }
46 #mainMenuArea div a:hover{
47 color:red;
48 }
49 #mainMenuArea div span{
50 font-weight: bolder;
51 color:rgb(255,68,0);
52 float:right;
53 margin-right:5px;
54 }
55 .childMenu{
56 border:solid 2px red;
57 width:500px;
58 height:300px;
59 position: relative;
60 top:0;
61 left:239px;
62 z-index:100;
63 display:none;
64 }
65 </style>
66 <script type="text/javascript">
67 window.onload = function(){
68 var currentMainMenu = null;
69 var currentChildMenu = null;
70
71 // ，
72 //1、
73 var mainMenuList = document.getElementById("mainMenuArea").getElementsByTagName("div");
74 console.log("find mainMenu's count is:" + mainMenuList.length);
75 //2、 onmouseover、onmouseout
76 for(var i=0;i<mainMenuList.length;i++){
77 //2.1 onmouseover（ ）
78 mainMenuList[i].onmouseover = function(){
79 currentMainMenu = this;
80 //
81 currentMainMenu.setAttribute("class","hover");
82 //
83 currentMainMenu.getElementsByTagName("span")[0].style.display = "none";
84 //
85 var childMenuIndex = this.getAttribute("data-index");
86 console.log("current childMenuIndex is :" + childMenuIndex);
87 // ID
88 currentChildMenu = document.getElementById("childMenu_" + childMenuIndex);
89
90 currentChildMenu ?
91 currentChildMenu.style.display = "block" :
92 void(0);
93
94 // ？
95 //if(!currentChildMenu.onmouseover) {
96 // ，
97 currentChildMenu.onmouseover = function () {
98 console.log('now mouse is on childMenu:' + this.id);
99 currentMainMenu.setAttribute("class","hover");
100 currentMainMenu.getElementsByTagName("span")[0].style.display = "none";
101 this.style.display = "block";
102
103 };
104 // ，
105 currentChildMenu.onmouseout = function () {
106 currentMainMenu.setAttribute("class","");
107 currentMainMenu.getElementsByTagName("span")[0].style.display = "block";
108 this.style.display = "none";
109 console.log('in this code');
110 };
111 //}
112 };
113 //2.2 onmouseout（ ）
114 mainMenuList[i].onmouseout = function(){
115 //
116 currentMainMenu.setAttribute("class","");
117 //
118 this.getElementsByTagName("span")[0].style.display = "block";
119 // ， ？
120 currentChildMenu ?
121 currentChildMenu.style.display = "none" :
122 void(0);
123 }
124 }
125 };
126 </script>
127 </head>
128 <body>
129 <div id="top">
130
131 </div>
132 <div id="content">
133 <div id="mainMenuArea">
134 <div data-index="1" class="">
135 <a href="#"> </a>
136 <a href="#"> </a>
137 <a href="#"> </a>
138 <a href="#"> </a>
139 <span>></span>
140 </div>
141 <div data-index="2" class="">
142 <a href="#"> </a>
143 <a href="#"> </a>
144 <a href="#"> </a>
145 <a href="#"> </a>
146 <span>></span>
147 </div>
148 </div>
149 <div id="childMenu_1" class="childMenu">
150
151 </div>
152 <div id="childMenu_2" class="childMenu">
153
154 </div>
155 </div>
156 <div id="foot">
157
158 </div>
159 </body>
160 </html>