帶緩沖的伸縮下拉菜單_菜單導航特效

伸縮下拉菜單，帶緩沖，點擊以后分別載進不同的圖片，實際上也可以此為基礎制作圖片導航，很不錯的效果。

<html>
<head>
<title>帶緩沖的伸縮下拉菜單</title>
<meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312">
<style>
body{
background:white
}
#menuList{
border-bottom:solid 1px #333333;
width:500px;
}
.boxStyle .caption{
border-top:none;
cursor:pointer;
background:#33FF99;
height:30px;
line-height:30px;
font-family:"Lucida Sans Unicode";
font-size:12px;
padding-left:5px;
}
.boxStyle{
border:solid 1px #333333;
border-bottom:none;
background:#0099CC;
overflow:hidden;
position:relative
}
img{
border:none
}
.infor{
background:#000000;
position:absolute;
bottom:0;
left:0;
width:100%;
filter: Alpha(opacity=50);   
-moz-opacity:.5;   
opacity:0.5;
display:none;
cursor:pointer
}
.infor:hover{
filter: Alpha(opacity=90);   
-moz-opacity:.9;   
opacity:.9;
}
</style>
<script type="text/javascript">
window.onload=function(){
getData();
init();
imgInfor();
}
var speed=0;
var openOrClose=1;
var check=2;
var INIT_HEIGHT="30px";  
var inforOHeight="20px"; 
var inforEHeight="320px";
var k_menuBox=new Array();
var k_originalHeight=new Array();
var k_caption=new Array();
var k_infor=new Array();
function $(ele,tags){
if(tags=="id"){
return document.getElementById(ele);
}
else
return getElementsBytagName(ele);
}
function getData(){
  var k=$("menuList","id").getElementsByTagName("div");
  for(var i=0;i<k.length;i++){
    if(k[i].className=="infor"){
	  k_infor.push(k[i]);
	  k[i].style.height=inforOHeight;
	}
    if(k[i].className=="boxStyle"){
	  k_menuBox.push(k[i]);
	  k_originalHeight.push(k[i].style.height);
	  initHeight();
	  var t=k[i].getElementsByTagName("div");
	  for(var ii=0;ii<t.length;ii++){
	    if(t[ii].className=="caption"){
		  k_caption.push(t[ii]);
		}
	  }
	}
  }
}
function imgInfor(){
  for(var i=0;i<k_infor.length;i++){
    k_infor[i].style.display="none";
	k_infor[i].style.height=inforOHeight;
	k_infor[i].onclick=function(){
	  if(check==0){
	    if(this.style.height==inforOHeight){                   
		  openIt(this,inforEHeight);
        }
	    else{
	      closeBox(this,inforOHeight);
	    }
	  }
	}
  }
}
function initHeight(){
  for(var i=0;i<k_menuBox.length;i++){
    k_menuBox[i].style.height=INIT_HEIGHT;
  }
}
function findIt(){
  for(var i=0;i<k_menuBox.length;i++){
    if(k_menuBox[i].style.height!=INIT_HEIGHT){
    return k_menuBox[i];
    }
  }
  return false;
}
function closeBox(ele,lastHeight){
  check=1;
  openOrClose=0;
  if(ele!=false){
    var h=parseInt(ele.style.height);
    if(h>parseInt(lastHeight)){
       animation(ele,lastHeight,50,8,"close");
	   setTimeout(function(){closeBox(ele,lastHeight)},1);
    } 
	else{
	  ele.style.height=lastHeight;
	  check=0;
	  openOrClose=1;
	}
  }
}
//打開盒子
function openIt(ele,lastHeight){
    check=1;
	openOrClose=0;
    var h=parseInt(ele.style.height);
    if(h<parseInt(lastHeight)){
	   animation(ele,lastHeight,50,8,"open");
	   setTimeout(function(){openIt(ele,lastHeight)},1);
    }
	else{
	  ele.style.height=lastHeight;
	  check=0;
	  openOrClose=1;
	}
}
function animation(ele,lastHeight,ends,speeds,tag){
  if(Math.abs(parseInt(ele.style.height)-parseInt(lastHeight))>ends){
    if(speed<speeds)
	  speed+=1;
  }
  else{
    if(speed!=1)
	  speed--;
  }
  var g=parseInt(ele.style.height); 
  if(tag=="open")
  g+=speed;
  else
  g-=speed;
  ele.style.height=g+"px";
}
function changeCaptionStyle(ele){
   for(var i=0;i<k_caption.length;i++){
     k_caption[i].style.backgroundColor="#33FF99";
	 k_caption[i].style.color="#333333";
	 if(k_caption[i]==ele){
	   k_caption[i].style.color="white"; 
	   ele.style.backgroundColor="#006666";
	 }
   }
}
function changeCaptionStyle2(ele,bgcolor){
if(ele.parentNode.style.height==INIT_HEIGHT){
  ele.style.backgroundColor=bgcolor;
}
}
function init(){
  for(var i=0;i<k_caption.length;i++){
    k_caption[i].index = i;
	k_caption[i].onmouseover=function(){
	  changeCaptionStyle2(this,"#33CC99");
	}
	k_caption[i].onmouseout=function(){
	  changeCaptionStyle2(this,"#33FF99");
	}
	k_caption[i].onclick=function(){
	  if(openOrClose==0){
	    return false;
	  }
	  changeCaptionStyle(this);
	  if(this.parentNode.style.height==INIT_HEIGHT){
	    imgInfor();                                
	    k_infor[this.index].style.display="block"; 
	    closeBox(findIt(),INIT_HEIGHT);            
		openIt(this.parentNode,k_originalHeight[this.index]);
      }
	  else{
	    imgInfor();
	  	changeCaptionStyle();
	    closeBox(findIt(),INIT_HEIGHT);
	  }
	}
  }
}
</script>
</head>
<body>
<div id="menuList">
  <div style="height:350px;" class="boxStyle">
    <div class="caption">英國巨石陣，至今仍是謎</div>
    <a href="/" target="_blank">
    <div class="infor"></div>
    <img src="http://p1.mb5u.com/texiao/1/wall5.jpg">
    </a>
  </div>
  <div style="height:350px;" class="boxStyle">
    <div class="caption">德國鄉村，人與自然和諧</div>
    <a href="http://www.zhaotila.cn" target="_blank">
    <div class="infor"></div>
    <img src="http://p1.mb5u.com/texiao/1/wall6.jpg">
    </a>
  </div>
  <div style="height:350px;" class="boxStyle">
    <div class="caption">納差湖，一片潔凈之地</div>
    <a href="/" target="_blank">
    <div class="infor"></div>
    <img src="http://p1.mb5u.com/texiao/1/wall7.jpg">
    </a>
  </div>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

帶緩沖的伸縮下拉菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些