`

JS滑动门效果

    博客分类:
  • html
阅读更多
<html>
<head>
<title>滑动门效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{font:12px "宋体";margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.TabADS{width:160px;}
.TabADS ul{width:160px;height:24px;background:#fff;}
.TabADS li{width:40px;float:left;height:18px;padding:6px 0 0 0;background:url(http://dl.iteye.com/upload/picture/pic/63606/79be4821-1960-32d0-8f2f-72a0e9d4abb1.gif) no-repeat right #e4e4e4;text-align:center;color:#333;cursor:pointer;}
.TabADS .TasADSOn{background:url(http://ueaner.iteye.com/upload/picture/pic/63604/1177d8b9-cbf8-3fd2-9eda-0a9cf77958f7.gif) no-repeat right #ffe4a6;text-align:center;color:#333;font-weight:bold;cursor:pointer;}
.TabADSCon{background:#FFD77B;padding:5px;width:150px;}
.TabADSCon li{text-align:left;line-height:20px;}
</style>
<script language="javascript" type="text/javascript">
function Show_TabADSMenu(tabadid_num,tabadnum){
	for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}
	for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}
	document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";
	document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="TabADS">
  <ul>
    <li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">VB</li>
    <li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">ASP</li>
    <li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">PHP</li>
    <li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">cgi</li>
  </ul>
</div>
<div class="TabADSCon">
  <ul id="tabadcontent_10">
    <li><a href="#" target="_blank">基于VC的推箱子游戏</a></li>
  </ul>
  <ul id="tabadcontent_11" style="display:none;">
    <li><a href="#" target="_blank">VB批量重命名程序</a></li>
  </ul>
  <ul id="tabadcontent_12" style="display:none;">
    <li><a href="#" target="_blank">VC++五子棋游戏进阶版源码</a></li>
  </ul>
  <ul id="tabadcontent_13" style="display:none;">
    <li><a href="#" target="_blank">精美多模式DELPHI闹钟程序</a></li>
  </ul>
</div>
</body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics