带缓冲的伸缩下拉菜单

2024-09-05 12:20:09

字体：大中小

来源：转载

供稿：网友

伸缩下拉菜单，带缓冲，点击以后分别载入不同的图片，实际上也可以此为基础制作图片导航，很不错的效果。

<html><head><title>带缓冲的伸缩下拉菜单</title><meta http-equiv="content-Type" content="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);}elsereturn 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>        <div class="infor"></div>    <img src="/d/file/p/2024/09-05/1259796ad5201807aa92e3a46a0e8b9e.jpg">      </div>  <div style="height:350px;" class="boxStyle">    <div class="caption">德国乡村，人与自然和谐</div>        <div class="infor"></div>    <img src="/d/file/p/2024/09-05/d503fe120f093b7fc84843db33024abd.jpg">      </div>  <div style="height:350px;" class="boxStyle">    <div class="caption">纳差湖，一片洁净之地</div>        <div class="infor"></div>    <img src="/d/file/p/2024/09-05/f95044b2d0927402589fea43d7fba4f7.jpg">      </div></div></body></html>

上一篇：自动切换的简洁网页选项卡

下一篇：向上滑动的蓝色大气导航菜单