-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
299 lines (295 loc) · 13.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery手机风格通讯录字母滑动查询联系人手机号码手机网页特效-风烛源店铺【http://429480486.taobao.com】</title>
<meta name="description" content="jquery slidernav滑块插件仿iPhone苹果手机风格通讯录字母滑动查询联系人手机号码效果,通过鼠标滑到字母上进行查询联系人手机号码。" />
<link rel="stylesheet" type="text/css" href="css/slidernav.css" media="screen, projection" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/slidernav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').sliderNav();
});
</script>
<style>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#eee;}
/* demo */
.demo{width:400px;margin:20px auto;}
</style>
</head>
<body>
<div class="demo">
<div id="slider">
<div class="slider-content">
<ul>
<li id="a"><a name="a" class="title">A</a>
<ul>
<li><a href="http://429480486.taobao.com">Adam</a></li>
<li><a href="http://429480486.taobao.com">Alex</a></li>
<li><a href="http://429480486.taobao.com">Ali</a></li>
<li><a href="http://429480486.taobao.com">Apple</a></li>
<li><a href="http://429480486.taobao.com">Arthur</a></li>
<li><a href="http://429480486.taobao.com">Ashley</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="http://429480486.taobao.com">Barry</a></li>
<li><a href="http://429480486.taobao.com">Becky</a></li>
<li><a href="http://429480486.taobao.com">Biff</a></li>
<li><a href="http://429480486.taobao.com">Billy</a></li>
<li><a href="http://429480486.taobao.com">Bozarking</a></li>
<li><a href="http://429480486.taobao.com">Bryan</a></li>
</ul>
</li>
<li id="c"><a name="c" class="title">c</a>
<ul>
<li><a href="http://429480486.taobao.com">Calista</a></li>
<li><a href="http://429480486.taobao.com">Cathy</a></li>
<li><a href="http://429480486.taobao.com">Chris</a></li>
<li><a href="http://429480486.taobao.com">Cinderella</a></li>
<li><a href="http://429480486.taobao.com">Corky</a></li>
<li><a href="http://429480486.taobao.com">Cypher</a></li>
</ul>
</li>
<li id="d"><a name="d" class="title">d</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="e"><a name="e" class="title">E</a>
<ul>
<li><a href="http://429480486.taobao.com">Barry</a></li>
<li><a href="http://429480486.taobao.com">Becky</a></li>
<li><a href="http://429480486.taobao.com">Biff</a></li>
<li><a href="http://429480486.taobao.com">Billy</a></li>
<li><a href="http://429480486.taobao.com">Bozarking</a></li>
<li><a href="http://429480486.taobao.com">Bryan</a></li>
</ul>
</li>
<li id="f"><a name="f" class="title">f</a>
<ul>
<li><a href="http://429480486.taobao.com">Calista</a></li>
<li><a href="http://429480486.taobao.com">Cathy</a></li>
<li><a href="http://429480486.taobao.com">Chris</a></li>
<li><a href="http://429480486.taobao.com">Cinderella</a></li>
<li><a href="http://429480486.taobao.com">Corky</a></li>
<li><a href="http://429480486.taobao.com">Cypher</a></li>
</ul>
</li>
<li id="g"><a name="g" class="title">g</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="h"><a name="h" class="title">h</a>
<ul>
<li><a href="http://429480486.taobao.com">Barry</a></li>
<li><a href="http://429480486.taobao.com">Becky</a></li>
<li><a href="http://429480486.taobao.com">Biff</a></li>
<li><a href="http://429480486.taobao.com">Billy</a></li>
<li><a href="http://429480486.taobao.com">Bozarking</a></li>
<li><a href="http://429480486.taobao.com">Bryan</a></li>
</ul>
</li>
<li id="i"><a name="i" class="title">i</a>
<ul>
<li><a href="http://429480486.taobao.com">Calista</a></li>
<li><a href="http://429480486.taobao.com">Cathy</a></li>
<li><a href="http://429480486.taobao.com">Chris</a></li>
<li><a href="http://429480486.taobao.com">Cinderella</a></li>
<li><a href="http://429480486.taobao.com">Corky</a></li>
<li><a href="http://429480486.taobao.com">Cypher</a></li>
</ul>
</li>
<li id="j"><a name="j" class="title">j</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="k"><a name="k" class="title">k</a>
<ul>
<li><a href="http://429480486.taobao.com">Barry</a></li>
<li><a href="http://429480486.taobao.com">Becky</a></li>
<li><a href="http://429480486.taobao.com">Biff</a></li>
<li><a href="http://429480486.taobao.com">Billy</a></li>
<li><a href="http://429480486.taobao.com">Bozarking</a></li>
<li><a href="http://429480486.taobao.com">Bryan</a></li>
</ul>
</li>
<li id="l"><a name="l" class="title">l</a>
<ul>
<li><a href="http://429480486.taobao.com">Calista</a></li>
<li><a href="http://429480486.taobao.com">Cathy</a></li>
<li><a href="http://429480486.taobao.com">Chris</a></li>
<li><a href="http://429480486.taobao.com">Cinderella</a></li>
<li><a href="http://429480486.taobao.com">Corky</a></li>
<li><a href="http://429480486.taobao.com">Cypher</a></li>
</ul>
</li>
<li id="m"><a name="m" class="title">m</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="n"><a name="n" class="title">n</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="o"><a name="o" class="title">o</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="p"><a name="p" class="title">p</a>
<ul>
<li><a href="http://429480486.taobao.com">Barry</a></li>
<li><a href="http://429480486.taobao.com">Becky</a></li>
<li><a href="http://429480486.taobao.com">Biff</a></li>
<li><a href="http://429480486.taobao.com">Billy</a></li>
<li><a href="http://429480486.taobao.com">Bozarking</a></li>
<li><a href="http://429480486.taobao.com">Bryan</a></li>
</ul>
</li>
<li id="q"><a name="q" class="title">q</a>
<ul>
<li><a href="http://429480486.taobao.com">Calista</a></li>
<li><a href="http://429480486.taobao.com">Cathy</a></li>
<li><a href="http://429480486.taobao.com">Chris</a></li>
<li><a href="http://429480486.taobao.com">Cinderella</a></li>
<li><a href="http://429480486.taobao.com">Corky</a></li>
<li><a href="http://429480486.taobao.com">Cypher</a></li>
</ul>
</li>
<li id="r"><a name="r" class="title">r</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="s"><a name="s" class="title">s</a>
<ul>
<li><a href="http://429480486.taobao.com">Barry</a></li>
<li><a href="http://429480486.taobao.com">Becky</a></li>
<li><a href="http://429480486.taobao.com">Biff</a></li>
<li><a href="http://429480486.taobao.com">Billy</a></li>
<li><a href="http://429480486.taobao.com">Bozarking</a></li>
<li><a href="http://429480486.taobao.com">Bryan</a></li>
</ul>
</li>
<li id="t"><a name="t" class="title">t</a>
<ul>
<li><a href="http://429480486.taobao.com">Calista</a></li>
<li><a href="http://429480486.taobao.com">Cathy</a></li>
<li><a href="http://429480486.taobao.com">Chris</a></li>
<li><a href="http://429480486.taobao.com">Cinderella</a></li>
<li><a href="http://429480486.taobao.com">Corky</a></li>
<li><a href="http://429480486.taobao.com">Cypher</a></li>
</ul>
</li>
<li id="u"><a name="u" class="title">u</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="v"><a name="v" class="title">v</a>
<ul>
<li><a href="http://429480486.taobao.com">Barry</a></li>
<li><a href="http://429480486.taobao.com">Becky</a></li>
<li><a href="http://429480486.taobao.com">Biff</a></li>
<li><a href="http://429480486.taobao.com">Billy</a></li>
<li><a href="http://429480486.taobao.com">Bozarking</a></li>
<li><a href="http://429480486.taobao.com">Bryan</a></li>
</ul>
</li>
<li id="w"><a name="w" class="title">w</a>
<ul>
<li><a href="http://429480486.taobao.com">Calista</a></li>
<li><a href="http://429480486.taobao.com">Cathy</a></li>
<li><a href="http://429480486.taobao.com">Chris</a></li>
<li><a href="http://429480486.taobao.com">Cinderella</a></li>
<li><a href="http://429480486.taobao.com">Corky</a></li>
<li><a href="http://429480486.taobao.com">Cypher</a></li>
</ul>
</li>
<li id="x"><a name="x" class="title">x</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="y"><a name="y" class="title">y</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
<li id="z"><a name="z" class="title">z</a>
<ul>
<li><a href="http://429480486.taobao.com">damien</a></li>
<li><a href="http://429480486.taobao.com">danny</a></li>
<li><a href="http://429480486.taobao.com">denver</a></li>
<li><a href="http://429480486.taobao.com">devon</a></li>
<li><a href="http://429480486.taobao.com">doug</a></li>
<li><a href="http://429480486.taobao.com">dustin</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<p align="center">来源:网络 代码整理:<a href="http://429480486.taobao.com" target="_blank">风烛源店铺</a></p>
<p align="center">* 尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
</body>
</html>