CSS+JS实现很流行的用户列表代码

最新推荐文章于 2021-08-22 01:21:28 发布

转载最新推荐文章于 2021-08-22 01:21:28 发布 · 434 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jizhitao/archive/2009/10/13/1582631.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种使用CSS和JavaScript实现的用户列表效果，包括切换不同的用户列表类别（如活跃网友和最新加入），并为每个用户提供了丰富的展示信息，如头像、用户名等。

Code
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>CSS+JS实现很流行的用户列表代码 - www.webdm.cn</title>
6

function nTabs(thisObj,Num)

{
8

if(thisObj.className == "active")return;
9

var tabObj = thisObj.parentNode.id;
10

var tabList = document.getElementById(tabObj).getElementsByTagName("li");
11

for(i=0; i <tabList.length; i++)
12

{
13

if (i == Num)
14

{
15

thisObj.className = "active";
16

document.getElementById(tabObj+"_Content"+i).style.display = "block";
17

}else

{
18

tabList[i].className = "normal";
19

document.getElementById(tabObj+"_Content"+i).style.display = "none";
20

}
21

}
22

}
23

var show_king_id = 1;
24

function show_king_list(e,k)
25

{
26

if(show_king_id == k) return true;
27

o = document.getElementById("a"+show_king_id);
28

o.className = "bg";
29

e.className = " ";
30

show_king_id = k;
31

}
32

var show_kinga_id = 1;
33

function show_kinga_list(f,l)
34

{
35

if(show_kinga_id == l) return true;
36

o = document.getElementById("b"+show_kinga_id);
37

o.className = "bg";
38

f.className = " ";
39

show_kinga_id = l;
40

}
41

</script>
42

}{
44

margin: 0;
45

padding: 0;
46

}
47

body {

}{
48

font-size:12px;
49

font-family:"宋体",Arial, Helvetica, sans-serif;
50

color:#666666;
51

}
52

.door_container {

}{
53

width:200px;
54

}
55

.door_container .TabTitle {

}{
56

height:36px;
57

}
58

.door_container .TabTitle li {

}{
59

list-style:none;
60

float:left;
61

width:77px;
62

height:36px;
63

cursor:pointer;
64

padding-left:2px;
65

line-height:28px;
66

color:#7c7c7c;
67

font-size:14px;
68

text-align:center;
69

font-weight:bold;
70

}
71

.door_container .TabTitle .active {

}{
72

color:#000;
73

background:#CC9999;
74

}
75

.door_container .TabTitle .normal {

}{
76

color:#7c7c7c;
77

}
78

.door_container .TabContent {

}{
79

width:198px;
80

}
81

.none {

}{
82

display: none;
83

}
84

.star{

}{
85

width:198px;
86

overflow:hidden;
87

white-space:nowrap;
88

text-overflow:ellipsis;
89

}
90

.star dl{

}{
91

width:198px;
92

margin:5px 0;
93

float:left;
94

}
95

.star dl dd{

}{
96

float:left;
97

margin-left:8px;
98

line-height:18px;
99

}
100

.star dl dt{

}{
101

float:left;
102

}
103

.bg{

}{
104

width:198px;
105

margin:5px 0;
106

background:#eee;
107

float:left;
108

}
109

.sl01{

}{
110

background:#eee;
111

margin:15px 5px 0 0;
112

width:25px;
113

height:18px;
114

padding-top:7px;
115

text-align:center;
116

font-weight:bold;
117

color:#FF0000;
118

}
119

.sl02 img{

}{
120

border:1px solid #ccc;
121

padding:3px;
122

}
123

.sl03 a{

}{
124

color:#0066CC;
125

text-decoration:underline;
126

}
127

.sl03 a:hover{

}{
128

color:#FF3300;
129

text-decoration:none;
130

}
131

.sl04{

}{
132

background:#eee;
133

}
134

.sl05{

}{
135

}
136

.bg .sl01{

}{
137

background:#0066cc;
138

margin:5px 5px 0 0;
139

width:25px;
140

height:18px;
141

padding-top:7px;
142

text-align:center;
143

font-weight:bold;
144

color:#FF0000;
145

}
146

.bg .sl02 img{

}{
147

display:none;
148

}
149

.bg .sl03{

}{
150

width:140px;
151

}
152

.bg .sl04{

}{
153

background:#eee;
154

width:140px;
155

}
156

.bg .sl05{

}{
157

display:none;
158

}
159

</style>
160

</head>
161

<body>
162

<div class="door_container">
163

<div class="TabTitle">
164

<ul id="myTab">
165

<li class="active" onmouseover=nTabs(this,0);>活跃网友</li>
166

<li class="normal" onmouseover=nTabs(this,1);>最新加入</li>
167

</ul>
168

</div>
169

<div class="TabContent">
170

<div id=myTab_Content0>
171

<div class="star">
172

<dl id=a1 onmouseover=show_king_list(this,1);>
173

<dt class="sl01">01</dt>
174

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
175

<dd class="sl03"><a href="#">网页代码站</a></dd>
176

<dd class="sl04">26岁·河南郑州</dd>
177

<dd class="sl05">人气:5236</dd>
178

</dl>
179

<dl class=bg id=a2 onmouseover=show_king_list(this,2);>
180

<dt class="sl01">01</dt>
181

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
182

<dd class="sl03"><a href="#">网页代码站</a></dd>
183

<dd class="sl04">26岁·河南郑州</dd>
184

<dd class="sl05">人气:5236</dd>
185

</dl>
186

<dl class=bg id=a7 onmouseover=show_king_list(this,7);>
187

<dt class="sl01">01</dt>
188

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
189

<dd class="sl03"><a href="#">源码爱好者</a></dd>
190

<dd class="sl04">26岁·河南郑州</dd>
191

<dd class="sl05">人气:5236</dd>
192

</dl>
193

<dl class=bg id=a10 onmouseover=show_king_list(this,10);>
194

<dt class="sl01">01</dt>
195

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
196

<dd class="sl03"><a href="#">网页代码站</a></dd>
197

<dd class="sl04">26岁·河南郑州</dd>
198

<dd class="sl05">人气:5236</dd>
199

</dl>
200

</div>
201

</div>
202

<div class="none" id=myTab_Content1>
203

<div class="star">
204

<dl id=b1 onmouseover=show_kinga_list(this,1);>
205

<dt class="sl01">01</dt>
206

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/1/122/751/1227510.gif" alt="" /></a></dt>
207

<dd class="sl03"><a href="#">我心永恒</a></dd>
208

<dd class="sl04">26岁·河南郑州</dd>
209

<dd class="sl05">人气:5236</dd>
210

</dl>
211

<dl class=bg id=b4 onmouseover=show_kinga_list(this,4);>
212

<dt class="sl01">01</dt>
213

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
214

<dd class="sl03"><a href="#">我心永恒</a></dd>
215

<dd class="sl04">26岁·河南郑州</dd>
216

<dd class="sl05">人气:5236</dd>
217

</dl>
218

<dl class=bg id=b5 onmouseover=show_kinga_list(this,5);>
219

<dt class="sl01">01</dt>
220

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
221

<dd class="sl03"><a href="#">我心永恒</a></dd>
222

<dd class="sl04">26岁·河南郑州</dd>
223

<dd class="sl05">人气:5236</dd>
224

</dl>
225

<dl class=bg id=b6 onmouseover=show_kinga_list(this,6);>
226

<dt class="sl01">01</dt>
227

<dt class="sl02"><a href="#"><img src="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.gif" alt="" /></a></dt>
228

<dd class="sl03"><a href="#">我心永恒</a></dd>
229

<dd class="sl04"></dd>
230

<dd class="sl05">人气:5236</dd>
231

</dl>
232

</div>
233

</div>
234

</div>
235

</div>
236

</body>
237

</html>
238

239

转载于:https://www.cnblogs.com/jizhitao/archive/2009/10/13/1582631.html