有缓冲的伸缩下拉菜单（js）

< 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

转载于:https://www.cnblogs.com/webdm/archive/2011/01/07/1929434.html