<html>
<head>
<title>有缓冲的伸缩下拉菜单（js）_网页代码站(www.webdm.cn)</title>
<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://www.webdm.cn/images/wall5.jpg">
</a>
</div>
<div style="height:350px;" class="boxStyle">
<div class="caption">德国乡村，人与自然和谐</div>
<a href="http://www.webdm.cn" target="_blank">
<div class="infor"></div>
<img src="http://www.webdm.cn/images/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://www.webdm.cn/images/wall7.jpg">
</a>
</div>
</div>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/3e676fb8-9feb-47a2-8d9d-3043a69203e7.html