JavaScript实现的伸展收缩型菜单代码

更新时间：2026-08-08 18:17:29作者：yezheng

本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下：

这是一款真正的JavaScript伸展收缩型菜单，鼠标放上看一看，是不是很酷？鼠标划出菜单项的时候，背景会伸长。菜单没有加链接，想用的自己加，再美化一下，绝对够个性吧。

具体代码如下：

<html>

<head>

<title>真正的JavaScript伸展收缩型菜单</title>

#con div{width:100px;margin:5px 0 5px 0;font-size:9pt;height:23px;color:white;}

</style>

<div style="background-color:pink">这是什么色</div>

</div>

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.offsetWidth<maxW){

self.style.width = self.offsetWidth + 5 + 'px';

}else{

clearInterval(tims);

}

},10);

}

divs[i].onmouseout=function(){

var self = this;

clearInterval(tims);

timss=setInterval(function(){

if(self.offsetWidth>minW){

self.style.width = self.offsetWidth - 5 + 'px';

}else{

clearInterval(timss);

}

},10);

}

})();

}

//使用方法

roulMenu('con',200,100);

</script>

希望本文所述对大家的JavaScript程序设计有所帮助。

手游推荐