-
Notifications
You must be signed in to change notification settings - Fork 58
/
index.html
128 lines (126 loc) · 5.87 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>豪情前端作品列表 - 着重于原生js的研究与探索</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/main.css" media="all"/>
</head>
<body>
<!--http://1.gitapp.sinaapp.com/base/-->
<div class="wrap shadow">
<ol id="ol" class="list">
</ol>
</div>
<div class="auto welcome none">
<p>欢迎加QQ群：327388215 交流</p>
</div>
<script type="text/javascript">
var str = '',
data = [
[
{ title : '第一章 表单常用代码'},
{ url : 'e/1/index.html', title : '去除字符串左右的空格' },
{ url : 'e/2/index.html', title : '验证用户是否输入' },
{ url : 'e/3/index.html', title : '禁止用户输入' },
{ url : 'e/4/index.html', title : '关闭用户中文输入法' },
{ url : 'e/5/index.html', title : '禁止用户复制和粘贴' },
{ url : 'e/6/index.html', title : '限制只能输入数字' },
{ url : 'e/7/index.html', title : '限制字符串长度' },
{ url : 'e/8/index.html', title : '仿微博提示可输入剩余字数' },
{ url : 'e/9/index.html', title : '换行文本自动滚动' },
{ url : 'e/10/index.html', title : 'Ctrl + Return提交表单' },
{ url : 'e/11/index.html', title : '文本内容进行关键字过滤' },
{ url : 'e/12/index.html', title : '全选反选少选复选框' },
{ url : 'e/13/index.html', title : '动态操作下拉选项' },
{ url : 'e/14/index.html', title : '级联菜单' },
{ url : 'e/15/index.html', title : '可添加的下拉选项' }
],
[
{ title : '第二章 常用图片相关代码'},
{ url : 'e/16/index.html', title : '可添加的下拉选项' },
{ url : 'e/17/index.html', title : '图片放大镜效果' },
{ url : 'e/18/index.html', title : '点击图片逐渐放大' }
],
[
{ title : '第三章 内容展示常用代码'},
{ url : 'e/19/index.html', title : '单元行上鼠标悬停提示' },
{ url : 'c/6/index.html', title : '无刷新切换皮肤，刷新后保存' },
{ url : 'e/20/index.html', title : '隔行换色鼠标经过换色' },
{ url : 'e/21/index.html', title : '添加或删除表格行' },
// { url : 'e/22/index.html', title : '表格的行拖动' },
{ url : 'c/1/index.html', title : '可拖动的弹出层' },
{ url : 'c/2/index.html', title : '选项卡轮播' },
{ url : 'c/3/index.html', title : '模拟滚动条' },
{ url : 'c/4/index.html', title : '缓动的对联广告' },
{ url : 'c/5/index.html', title : '拖动滑块验证' }
],
[
{ title : '第四章 常用图片轮换'},
{ url : 'slide/01/index.html', title : '百度爱玩 - 图片轮换' },
{ url : 'slide/02/bd02.html', title : '百度爱玩 - 遮罩下拉' },
{ url : 'slide/03/bd03.html', title : '百度爱玩 - 榜单tab切换' },
{ url : 'slide/04/index.html', title : 'css3弹出层' },
{ url : 'slide/05/index.html', title : '米4-活动页面' },
{ url : 'slide/06/index.html', title : '百度爱玩 - 图片轮换' },
{ url : 'slide/07/index.html', title : '百度微购－中秋送好礼' },
{ url : 'slide/08/index.html', title : '商品分类' },
{ url : 'slide/10/index.html', title : '渐显的tab菜单2' },
{ url : 'slide/09/index.html', title : '经典图片轮换－单个滚动' },
{ url : 'slide/13/index.html', title : '经典图片轮换－整个翻页' }
],
[
{ title : '第五章 移动端效果'},
{ url : 'm/01/index.html', title : '选项卡切换' }
],
[
{ title : '第六章 时间日期效果'},
{ url : 'd/03/index.html', title : '全日历' },
{ url : 'd/04/index.html', title : 'canvas实现小时钟' }
],
[
{ title : '第七章 其它练习'},
{ url : 'other/1/index.html', title : '乘法口诀输出' }
]
];
for(var i = 0; i < data.length; i++){
var items = data[i];
var sub = '';
for(var j=0; j<items.length; j++){
var son = items[j];
if(j == 0){
sub += '<li><h1><a href="javascript:;" title="' + son.title + '">' + son.title + '</a></h1><dl class="sub-dl">';
} else {
sub += '<dd><a href="' + son.url + '" target="_blank" title="' + son.title + '">' + son.title + '</a></dd>';
}
if(j == items.length - 1){
sub += '</dl></li>';
}
}
str += sub;
}
var ol = document.getElementById('ol');
ol.innerHTML = str;
var h1 = ol.getElementsByTagName('h1');
var dl = ol.getElementsByTagName('dl');
var tmp = -1;
var open = false;
for(var i=0; i < h1.length; i++){
h1[i].index = i;
h1[i].onclick = function(){
for(var i=0; i<h1.length; i++){
dl[i].style.display = 'none';
}
if(tmp == this.index && open){
dl[this.index].style.display = 'none';
open = false;
} else {
dl[this.index].style.display = 'block';
open = true;
}
tmp = this.index;
}
}
</script>
</body>
</html>