-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
432 lines (432 loc) · 17.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实例索引</title>
<style>
body,div,dl,dt,dd{margin:0;padding:0;}
a:link,a:visited{color:#FFF;text-decoration:none;}
a:hover{text-decoration:underline;}
#wrap{width:350px;background:#FFF;border:12px solid #EEE;border-radius:10px;margin:10px auto 0;padding:5px 5px 4px;}
#wrap dl{color:#FFF;overflow:hidden;background:#7CF;}
#wrap dt,#wrap dd{padding-left:15px;border-bottom:1px solid #FFF;}
#wrap dt{cursor:pointer;font-size:14px;background:#9C0;line-height:30px;font:700 14px/30px Tahoma;}
#wrap dt.current{background:#09F;}
#wrap dd{background:#7CF;line-height:25px;font:12px/25px Tahoma;}
#copyright{color:#999;width:374px;text-align:right;font:12px/1.5 Tahoma;margin:5px auto 0;}
</style>
<script src="CreateList.js"></script>
<script>
window.onload = function() {
new CreateList([
{
project: [{
text: "第一部分"
},
{
text: "控制Div属性",
href: "part1/01.html"
},
{
text: "网页换肤",
href: "part1/02.html"
},
{
text: "函数接收参数并弹出",
href: "part1/03.html"
},
{
text: "用循环将三个Div变成红色",
href: "part1/04.html"
},
{
text: "鼠标移入/移出改变样式",
href: "part1/05.html"
},
{
text: "记住密码提示框",
href: "part1/06.html"
}]
},
{
project: [{
text: "第二部分"
},
{
text: "百度输入法",
href: "part2/01.html"
},
{
text: "点击Div，显示其innerHTML",
href: "part2/02.html"
},
{
text: "求出数组中所有数字的和",
href: "part2/03.html"
},
{
text: "弹出层效果",
href: "part2/04.html"
},
{
text: "函数传参，改变Div任意属性的值",
href: "part2/05.html"
},
{
text: "图片列表：鼠标移入/移出改变图片透明度",
href: "part2/06.html"
},
{
text: "简易选项卡",
href: "part2/07.html"
},
{
text: "简易JS年历",
href: "part2/08.html"
},
{
text: "单一按钮显示/隐藏一播放列表收缩展开",
href: "part2/09.html"
},
{
text: "提示框效果",
href: "part2/10.html"
},
{
text: "鼠标移过，修改图片路径",
href: "part2/11.html"
},
{
text: "复选框（checkbox）全选/全不选/返选",
href: "part2/12.html"
}]
},
{
project: [{
text: "第三部分"
},
{
text: "用typeof查看数据类型",
href: "part3/01.html"
},
{
text: "用parseInt解析数字，并求和",
href: "part3/02.html"
},
{
text: "累加按钮，自加1",
href: "part3/03.html"
},
{
text: "输入两个数字，比较大小",
href: "part3/04.html"
},
{
text: "页面加载后累加，自加1",
href: "part3/05.html"
},
{
text: "判断数字是否为两位数",
href: "part3/06.html"
},
{
text: "网页计算器",
href: "part3/07.html"
},
{
text: "简易网页时钟",
href: "part3/08.html"
},
{
text: "倒计时时钟（100秒）",
href: "part3/09.html"
}]
},
{
project: [{
text: "第四部分"
},
{
text: "setTimeout应用",
href: "part4/01.html"
},
{
text: "自动播放一幻灯片效果",
href: "part4/02.html"
},
{
text: "自动改变方向一幻灯片效果",
href: "part4/03.html"
},
{
text: "agruments应用一求出函数参数的总合",
href: "part4/04.html"
},
{
text: "css函数一设置/读取对象的属性",
href: "part4/05.html"
},
{
text: "当前输入框高亮显示",
href: "part4/06.html"
},
{
text: "数组练习：各种数组方法的使用",
href: "part4/07.html"
},
{
text: "事件练习：封装兼容性添加、删除事件的函数",
href: "part4/08.html"
},
{
text: "星级评分系统",
href: "part4/09.html"
}]
},
{
project: [{
text: "第五部分"
},
{
text: "模拟select控件",
href: "part5/01.html"
},
{
text: "点击页面，显示单击的坐标",
href: "part5/02.html"
},
{
text: "用户按下键盘，显示keyCode",
href: "part5/03.html"
},
{
text: "阻止右键菜单（阻止默认事件）",
href: "part5/04.html"
},
{
text: "跟随鼠标移动（大图展示）",
href: "part5/05.html"
},
{
text: "自定义右键菜单",
href: "part5/06.html"
},
{
text: "用键盘控制Div",
href: "part5/07.html"
},
{
text: "Div闪烁",
href: "part5/08.html"
}]
},
{
project: [{
text: "第六部分"
},
{
text: "完美拖拽",
href: "part6/01.html"
},
{
text: "仿腾讯微博效果",
href: "part6/02.html"
},
{
text: "自定义多级右键菜单",
href: "part6/03.html"
}]
},
{
project: [{
text: "第七部分"
},
{
text: "自动轮播广告（缓冲效果）",
href: "part7/01.html"
},
{
text: "图片切换（Loading效果）",
href: "part7/02.html"
},
{
text: "移动效果（按轨迹移动）",
href: "part7/03.html"
}]
},
{
project: [{
text: "第八部分"
},
{
text: "iPhone手机解锁效果",
href: "iphone-unlock"
},
{
text: "自定义滚动条",
href: "part8/01.html"
},
{
text: "拖拽一Clone",
href: "part8/02.html"
},
{
text: "拖拽并可以改变大小",
href: "part8/03.html"
}]
},
{
project: [{
text: "第九部分"
},
{
text: "仿苹果电脑任务栏菜单",
href: "part9/01.html"
},
{
text: "拼图小游戏",
href: "part9/02.html"
},
{
text: "模拟表单控件",
href: "part9/03.html"
}]
},
{
project: [{
text: "第十部分"
},
{
text: "为数组添加方法（求和，最大值）",
href: "part10/01.html"
},
{
text: "自动轮播广告（面向对象版）",
href: "part10/02.html"
},
{
text: "运动框架（面向对象版）",
href: "part10/03.html"
},
{
text: "照片墙一多实例演示（面向对象版）",
href: "part10/04.html"
},
{
text: "拖拽库（面向对象版）",
href: "part10/05.html"
},
{
text: "无缝滚动（面向对象版）",
href: "part10/06.html"
},
{
text: "延时加载（面向对象版）",
href: "part10/07.html"
},
{
text: "仿腾讯游戏《英雄杀》官网Flash效果",
href: "part10/08.html"
},
{
text: "百度有啊通栏展示效果",
href: "part10/09.html"
},
{
text: "放烟花效果（面向对象版）",
href: "part10/10.html"
},
{
text: "《穿越火线》官网导航菜单",
href: "part10/11.html"
},
{
text: "《百度风云榜》TAB切换",
href: "part10/12.html"
},
{
text: "IBM官网导航条效果",
href: "part10/13.html"
},
{
text: "面试题-动态生成表格",
href: "part10/14.html"
}]
},
{
project: [{
text: "项目实例"
},
{
text: "眼镜在线试戴",
href: "eyeglass"
},
{
text: "日历组件",
href: "calendar"
},
{
text: "淘宝网-迷你登录",
href: "taobao-login"
},
{
text: "仿Google+ 游戏频道焦点图效果",
href: "google"
}]
},
{
project: [{
text: "YUI实例"
},
{
text: "淘宝旅行通用日历组件",
href: "calendar/trip-calendar"
},
{
text: "酒店价格日历",
href: "calendar/price-calendar"
}]
},
{
project: [{
text: "KISSY实例"
},
{
text: "KISSY版-酒店价格日历",
href: "calendar/hotel-price-calendar"
},
{
text: "KISSY版-图片浏览组件",
href: "lightbox"
},
{
text: "酒店地图交通与周边",
href: "rich-map"
},
{
text: "多SKU酒店价格中心",
href: "price-center/hotel"
},
{
text: "多SKU门票价格中心",
href: "price-center/ticket"
},
{
text: "新版-多SKU门票价格中心",
href: "price-center/newticket"
}]
}
]);
// (function() {
// var oDiv = document.createElement("div");
// oDiv.style.width = "384px";
// oDiv.style.textAlign = "right";
// oDiv.style.margin = "5px auto 10px";
// oDiv.innerHTML = "<iframe width=\"117\" height=\"24\" frameborder=\"0\" allowtransparency=\"true\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" border=\"0\" src=\"http://widget.weibo.com/relationship/followbutton.php?language=zh_cn&width=136&height=24&uid=1844880617&style=2&btn=red&dpc=1\"></iframe>";
// document.body.appendChild(oDiv)
// })();
};
</script>
</head>
<body></body>
</html>