上下伸展的JS菜单

< html >
< head >
< title > 上下伸展的JS菜单_网页代码站(www.webdm.cn) </ title >
< style type ="text/css" >
#con div { height : 98px ; width : 50px ; margin : 0 5px 0 5px ; float : left ; }
</ style >
</ head >
< body >

< div id ="con" >
< div style ="background-color:red" > CSS特效 </ div >
< div style ="background-color:green" > 源码下载 </ div >
< div style ="background-color:blue" > 精品代码 </ div >
< div style ="background-color:yellow" > 网页代码站 </ div >
< div style ="background-color:pink" > 预留项目 </ div >
< div style ="background-color:orange" > 预留项目 </ div >
< div style ="background-color:black" > 预留项目 </ div >
</ div >
</ body >
</ html >
< script language ="javascript" >
function $(e){ return document.getElementById(e);}

function roulMenu(e,maxW,minW){
var divs = $(e).getElementsByTagName( ' div ' );
for ( var i = 0 ;i < divs.length;i ++ ){
( function (){
var tims,timss;
divs[i].onmouseover = function (){
var self = this ;
clearInterval(timss);
tims = setInterval( function (){
if (self.offsetHeight < maxW){
self.style.height = self.offsetHeight + 5 + ' px ' ;
} else {
clearInterval(tims);
}
}, 10 );
}
divs[i].onmouseout = function (){
var self = this ;
clearInterval(tims);
timss = setInterval( function (){
if (self.offsetHeight > minW){
self.style.height = self.offsetHeight - 5 + ' px ' ;
} else {
clearInterval(timss);
}
}, 10 );
}
})();
}
}
// 使用方法
roulMenu( ' con ' , 200 , 100 );
</ script >
< br >
< p >< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！ </ p >

代码来自：http://www.webdm.cn/webcode/b9e20b86-4fc0-4fb0-990c-fb663e29460a.html

转载于:https://www.cnblogs.com/webdm/archive/2011/01/22/1942077.html