這是一個(gè)簡(jiǎn)單的仿淘寶滑動(dòng)門(mén)效果代碼，個(gè)人感覺(jué)真的挺不錯(cuò)，以前有過(guò)一款和這個(gè)差不多。在滑動(dòng)門(mén)里你可以再次布局你的網(wǎng)頁(yè)，可以做成一個(gè)功能超強(qiáng)大的導(dǎo)航，原示例是一個(gè)拼音索引程序，改成菜單也是可以的。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/

具體代碼如下：

<!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=utf-8" />
<title>簡(jiǎn)單仿淘寶的一個(gè)不錯(cuò)的滑動(dòng)門(mén)</title>
<style type="text/css">
body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;}
a{color:blue;}
ul{margin:0;padding:0;list-style:none;}
#navigation{height:26px;}
#navigation li{float:left;}
#navigation li.show .content{display:block;}
#navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden}
#navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;}
#container{position:relative;width:800px;margin:50px;}
#navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;}
#navigation li .content ul li{margin-right:10px;float:none;display:inline;}
#navigation li .content ul li a{border:none;}
#navigation li .content ul li{width:120px;}
#navigation li .content ul li h3{clear:both;text-align:left;}
</style>
</head>
<body>
<div id="container">
 <ul id="navigation">
  <li><span>整站導(dǎo)航：</span></li>
  <li>
   <a href="#" class="index">A</a>
   <div class="content">
    <h3>百度有啊</h3>
    <ul>
     <li><a >百度有啊</a></li>
     <li><a href="#">致富小康</a></li>
    </ul>
    <h3>腳本下載</h3>
    <ul>
     <li><a href="#">黃河泰山</a></li>
     <li><a href="#">池魚(yú)之殃</a></li>
     <li><a href="#">百度有啊</a></li>
    </ul>
   </div>
  </li>
  <li>
   <a href="#" class="index">B</a>
   <div class="content">
    <h3>網(wǎng)頁(yè)特效</h3>
    <ul>
     <li><a href="http://www.dbjr.com.cn/jiaoben/">網(wǎng)頁(yè)特效</a></li>
     <li><a >百度搜索</a></li>
     <li><a >百度MP3</a></li>
    </ul>
    <h3>精品代碼</h3>
    <ul>
     <li><a href="#">代碼索引</a></li>
     <li><a href="#">百度搜索</a></li>
    </ul>
   </div>
  </li>
  <li><a href="#" class="index">C</a><div class="content">C</div></li>
  <li><a href="#" class="index">D</a><div class="content">D</div></li>
  <li><a href="#" class="index">E</a><div class="content">E</div></li>
  <li><a href="#" class="index">F</a><div class="content">F</div></li>
  <li><a href="#" class="index">G</a><div class="content">G</div></li>
  <li><a href="#" class="index">H</a><div class="content">H</div></li>
  <li><a href="#" class="index">I</a><div class="content">I</div></li>
  <li><a href="#" class="index">J</a><div class="content">J</div></li>
  <li><a href="#" class="index">K</a><div class="content">K</div></li>
  <li><a href="#" class="index">L</a><div class="content">L</div></li>
  <li><a href="#" class="index">M</a><div class="content">M</div></li>
 </ul>
</div>
</body>
</html>
<script type="text/javascript">
function showAjaxContent(){
 var obj=document.getElementById("navigation");
 var liObj=obj.getElementsByTagName("li");
 var length=liObj.length;
 var currentLiObj;
 for(var i=0;i<length;i++){
  currentLiObj=liObj[i];
  if(currentLiObj.parentNode!=obj){continue;}
  //然后循環(huán)添加事件
  currentLiObj.onmouseover=function(){
   if(this.className.indexOf("show")<0){
    this.className+=" show";
   }
   clearStyle(this);
  }  
  currentLiObj.onmouseout=function(){
   this.className=this.className.replace("show","");
   clearStyle(this);
  }
 }
 function clearStyle(obj){
  for(var i=0;i<length;i++){
   currentLiObj=liObj[i];
   if(obj!=currentLiObj){
    currentLiObj.className=currentLiObj.className.replace("show","");
   }
  }
 }
}
showAjaxContent();
</script>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: