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

更新时间：2010年06月02日 14:11:24 作者：

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> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } var show_king_id = 1; function show_king_list(e,k) { if(show_king_id == k) return true; o = document.getElementById("a"+show_king_id); o.className = "bg"; e.className = " "; show_king_id = k; } var show_kinga_id = 1; function show_kinga_list(f,l) { if(show_kinga_id == l) return true; o = document.getElementById("b"+show_kinga_id); o.className = "bg"; f.className = " "; show_kinga_id = l; } </script> <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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="/UploadFiles/2010/5/201005092237256864.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</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="#"><img src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" alt="" /></a></dt> <dd class="sl03"><a href="#">水样年华</a></dd> <dd class="sl04">25岁·湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> </div> </div> </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript倒计时效果实现
这篇文章为大家分享了javascript倒计时效果实现代码段，现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，特别是双十一活动，需要的朋友可以参考下
2015-11-11
es6中class类静态方法，静态属性，实例属性，实例方法的理解与应用分析
这篇文章主要介绍了es6中class类静态方法，静态属性，实例属性，实例方法的理解与应用,结合实例形式分析了es6 class类静态方法，静态属性，实例属性，实例方法相关概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
2020-02-02
小程序实现计算器功能
这篇文章主要为大家详细介绍了小程序实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
微信小程序基于canvas渐变实现的彩虹效果示例
这篇文章主要介绍了微信小程序基于canvas渐变实现的彩虹效果,结合实例形式分析了微信小程序线性渐变及圆形渐变的相关实现技巧,需要的朋友可以参考下
2019-05-05
js项目中前端如何实现无感刷新token
本文主要介绍了js项目中前端如何实现无感刷新token，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
详解javascript中对数据格式化的思考
本篇文章主要介绍了详解javascript中对数据文本格式化的思考，具有一定的参考价值，有兴趣的可以了解一下。
2017-01-01
微信小程序通过js实现瀑布流布局详解
这篇文章主要介绍了微信小程序通过js实现瀑布流布局详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
Span元素的width属性无效果原因及解决方案
Span元素的width属性无效果原因及解决方案
2010-01-01
你必须了解的JavaScript中的属性描述对象详解(下)
JavaScript提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”。本文主要带大家了解一下JavaScript中你必须了解的属性描述对象，需要的可以参考一下
2022-12-12
js简单实现根据身份证号码识别性别年龄生日
根据身份证号码识别性别年龄生日，目前就有一个这样的需求，那么接下来为大家介绍下使用js是如何实现的，感兴趣的朋友不要错过
2013-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具