这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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>
- <div>
- <ul id="myTab">
- <li class="active" onmouseover=nTabs(this,0);>明星网友</li>
- <li class="normal" onmouseover=nTabs(this,1);>优秀圈主</li>
- </ul>
- </div>
- <div>
- <div>
- <div>
- <dl id=a1 onmouseover=show_king_list(this,1);>
- <dt class="sl01">01</dt>
- <dt class="sl02"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></dt>
- <dd class="sl03"><a href="#">水样年华</a></dd>
- <dd class="sl04">25岁·湖北 武汉</dd>
- <dd class="sl05">人气:1243178</dd>
- </dl>
- </div>
- </div>
- <div>
- <div>
- <dl id=b1 onmouseover=show_kinga_list(this,1);>
- <dt class="sl01">01</dt>
- <dt class="sl02"><img class="img-responsive" src="/UploadFiles/2010/5/201005092237256864.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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"><img class="img-responsive" src="http://www.aspxcs.net/UploadFiles/2010/5/201005092237212377.gif" data-src="" /></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>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0702/284788.html