注册
登录
标签
在线时间兑换积分
帮助
精品酷站论坛
»
JS,UI框架开发
» js+css完成的网站流行效果
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
js+css完成的网站流行效果
tension
管理员
个人空间
发短消息
加为好友
当前离线
1
#
大
中
小
发表于 2008-2-15 11:18
只看该作者
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>无标题文档</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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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="http://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/1/122/751/1227510.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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://reimg.360quan.com/50/50/stretch/d.image.360quan.com/user/6/146/611/1466112.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>
提示：您可以先修改部分代码再运行
UID
1
帖子
735
精华
25
积分
1891
阅读权限
200
在线时间
16 小时
注册时间
2007-5-26
最后登录
2008-10-12
查看详细资料
TOP
sdaupp
新手上路
个人空间
发短消息
加为好友
当前离线
2
#
大
中
小
发表于 2008-5-29 00:04
只看该作者
奥运倒计时。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <font color="#000000">离2008北京奥运会开幕还有:</font><span id="span_dt_dt" style="align: center no:1px solid black"></span><SCRIPT language=javascript> <!-- //document.write(""); function show_date_time(){ window.setTimeout("show_date_time()", 1000); BirthDay=new Date("8/08/2008 20:00:00");//这个日期是可以修改的 today=new Date(); timeold=(BirthDay.getTime()-today.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24; hrsold=Math.floor(e_hrsold); e_minsold=(e_hrsold-hrsold)*60; minsold=Math.floor((e_hrsold-hrsold)*60); seconds=Math.floor((e_minsold-minsold)*60); span_dt_dt.innerHTML="<b><align=center><font color=ff0000>"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"+"</b></font>" ; } show_date_time(); //--> </SCRIPT> </BODY>/html </HTML>
提示：您可以先修改部分代码再运行
UID
1742
帖子
2
精华
0
积分
1
阅读权限
10
在线时间
0 小时
注册时间
2008-5-29
最后登录
2008-5-29
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
设计人
网页设计
设计师加油
平面设计
摄影图片
插画
代码交流区
CSS代码交流
WEB2.0 / AJAX
JS,UI框架开发
JQuery
mootools
ProtoType
DHTML eXtensions
ASP,PHP,JSP...
资源共享区
酷站资源
提交酷站
PS笔刷/样式/滤镜&插件
开源软件
免费资源区
实用软件/手册
娱乐其他
灌水专区
娱乐时尚
IT风向标
社会新闻
娱乐八卦
投资理财
智力游戏
站务区
站务管理
控制面板首页
编辑个人资料
积分记录
公众用户组
个人空间管理
基本概况
版块排行
主题排行
发帖排行
积分排行
交易排行
在线时间
管理团队
393张高清晰web2.0站点截图
425款精品毛笔墨迹+38款墨迹底纹..
10位Master级别的Photoshop高手
绝对漂亮的笔刷
Soul 近期新作品欣赏..
熟女养成日志—长草
魔幻抽象/吸血鬼传说！！
photoshop仿CG滤镜
新手必看：积分、资源币、人民币、用户级别、发贴教程
设计QQ群:31195683
新手必看：积分、资源币、人民币、用户级别、发贴教程
设计QQ群:31195683
