js+css完成网站的会员照片信息显示效果

　　效果图:

　　演示代码

<!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=gb2312" /> 
<title>js+css完成网站的会员照片信息显示效果 </title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20nTabs(thisObj%2CNum)%7B%20%0D%0Aif(thisObj.className%20%3D%3D%20%22active%22)return%3B%20%0D%0Avar%20tabObj%20%3D%20thisObj.parentNode.id%3B%20%0D%0Avar%20tabList%20%3D%20document.getElementById(tabObj).getElementsByTagName(%22li%22)%3B%20%0D%0Afor(i%3D0%3B%20i%20%3CtabList.length%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0Aif%20(i%20%3D%3D%20Num)%20%0D%0A%7B%20%0D%0AthisObj.className%20%3D%20%22active%22%3B%20%0D%0Adocument.getElementById(tabObj%2B%22_Content%22%2Bi).style.display%20%3D%20%22block%22%3B%20%0D%0A%7Delse%7B%20%0D%0AtabList%5Bi%5D.className%20%3D%20%22normal%22%3B%20%0D%0Adocument.getElementById(tabObj%2B%22_Content%22%2Bi).style.display%20%3D%20%22none%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20show_king_id%20%3D%201%3B%20%0D%0Afunction%20show_king_list(e%2Ck)%20%0D%0A%7B%20%0D%0Aif(show_king_id%20%3D%3D%20k)%20return%20true%3B%20%0D%0Ao%20%3D%20document.getElementById(%22a%22%2Bshow_king_id)%3B%20%0D%0Ao.className%20%3D%20%22bg%22%3B%20%0D%0Ae.className%20%3D%20%22%20%22%3B%20%0D%0Ashow_king_id%20%3D%20k%3B%20%0D%0A%7D%20%0D%0Avar%20show_kinga_id%20%3D%201%3B%20%0D%0Afunction%20show_kinga_list(f%2Cl)%20%0D%0A%7B%20%0D%0Aif(show_kinga_id%20%3D%3D%20l)%20return%20true%3B%20%0D%0Ao%20%3D%20document.getElementById(%22b%22%2Bshow_kinga_id)%3B%20%0D%0Ao.className%20%3D%20%22bg%22%3B%20%0D%0Af.className%20%3D%20%22%20%22%3B%20%0D%0Ashow_kinga_id%20%3D%20l%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
*{ 
margin: 0; 
padding: 0; 
} 
body { 
font-size:12px; 
font-family:"宋体",Arial, Helvetica, sans-serif; 
color:#666666; 
} 
.door_container { 
width:200px; 
} 
.door_container .TabTitle { 
height:36px; 
} 
.door_container .TabTitle li { 
list-style:none; 
float:left; 
width:77px; 
height:36px; 
cursor:pointer; 
padding-left:2px; 
line-height:28px; 
color:#7c7c7c; 
font-size:14px; 
text-align:center; 
font-weight:bold; 
} 
.door_container .TabTitle .active { 
color:#000; 
background:#CC9999; 
} 
.door_container .TabTitle .normal { 
color:#7c7c7c; 
} 
.door_container .TabContent { 
width:198px; 
} 
.none { 
display: none; 
} 
.star{ 
width:198px; 
overflow:hidden; 
white-space:nowrap; 
text-overflow:ellipsis; 
} 
.star dl{ 
width:198px; 
margin:5px 0; 
float:left; 
} 
.star dl dd{ 
float:left; 
margin-left:8px; 
line-height:18px; 
} 
.star dl dt{ 
float:left; 
} 
.bg{ 
width:198px; 
margin:5px 0; 
background:#CCC; 
float:left; 
} 
.sl01{ 
background:#CCCCCC; 
margin:15px 5px 0 0; 
width:25px; 
height:18px; 
padding-top:7px; 
text-align:center; 
font-weight:bold; 
color:#FF0000; 
} 
.sl02 img{ 
border:1px solid #999999; 
padding:3px; 
} 
.sl03 a{ 
color:#0066CC; 
text-decoration:underline; 
} 
.sl03 a:hover{ 
color:#FF3300; 
text-decoration:none; 
} 
.sl04{ 
background:#CCCCCC; 
} 
.sl05{ 
} 
.bg .sl01{ 
background:#996600; 
margin:5px 5px 0 0; 
width:25px; 
height:18px; 
padding-top:7px; 
text-align:center; 
font-weight:bold; 
color:#FF0000; 
} 
.bg .sl02 img{ 
display:none; 
} 
.bg .sl03{ 
width:140px; 
} 
.bg .sl04{ 
background:#CCCCCC; 
width:140px; 
} 
.bg .sl05{ 
display:none; 
} 
</style> 
</head> 
<body> 
<div class="door_container"> 
<div class="TabTitle"> 
<ul id="myTab"> 
<li class="active" onmouseover=nTabs(this,0);>明星网友</li> 
<li class="normal" onmouseover=nTabs(this,1);>优秀圈主</li> 
</ul> 
</div> 
<div class="TabContent"> 
<div id=myTab_Content0> 
<div class="star"> 
<dl id=a1 onmouseover=show_king_list(this,1);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a2 onmouseover=show_king_list(this,2);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a3 onmouseover=show_king_list(this,3);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a4 onmouseover=show_king_list(this,4);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a5 onmouseover=show_king_list(this,5);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a6 onmouseover=show_king_list(this,6);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a7 onmouseover=show_king_list(this,7);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a8 onmouseover=show_king_list(this,8);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a9 onmouseover=show_king_list(this,9);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=a10 onmouseover=show_king_list(this,10);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
</div> 
</div> 
<div class="none" id=myTab_Content1> 
<div class="star"> 
<dl id=b1 onmouseover=show_kinga_list(this,1);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="/UploadFiles/2010/5/201005092237256864.gif" _ewebeditor_ta_src="%2FUploadFiles%2F2010%2F5%2F201005092237256864.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b2 onmouseover=show_kinga_list(this,2);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b3 onmouseover=show_kinga_list(this,3);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b4 onmouseover=show_kinga_list(this,4);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b5 onmouseover=show_kinga_list(this,5);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b6 onmouseover=show_kinga_list(this,6);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b7 onmouseover=show_kinga_list(this,7);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b8 onmouseover=show_kinga_list(this,8);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b9 onmouseover=show_kinga_list(this,9);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
<dl class="bg" id=b10 onmouseover=show_kinga_list(this,10);> 
<dt class="sl01">01</dt> 
<dt class="sl02"><a href="#" _ewebeditor_ta_href="%23"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.aspxcs.net%2FUploadFiles%2F2010%2F5%2F201005092237212377.gif" alt="" /></a></dt> 
<dd class="sl03"><a href="#" _ewebeditor_ta_href="%23">水样年华</a></dd> 
<dd class="sl04">25岁·湖北 武汉</dd> 
<dd class="sl05">人气:1243178</dd> 
</dl> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程