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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-zkss-menu-codes/

具体代码如下：

htmlheadtitle真正的Java脚本语言伸展收缩型菜单/title style type=' text/CSS ' # con div { width :100 px；margin :5 px 0 5px 0 font-size :9 pt；高度：23px颜色：白色；}/style div id=' con ' div style='底色：红色'红色菜单/divdiv style='底色-颜色：绿色'绿色菜单/divdiv style='底色-颜色：蓝色'蓝色/div div style='底色：黄色'黄色/divdiv style='底色-颜色：粉色'这是什么色/div div style='背景色：橙色'桔色/div div style='底色：黑色'黑色超酷/div/div脚本语言=' JavaScript '函数$(e){返回文档。getelementbyid(e)；}函数roulMenu(e，maxW，minW){ var divs=$(e).getElementsByTagName(' div ')；for(var I=0；idivs . lengthi){(function(){ var tims，timssdivs[i]).onmouseover=function(){ var self=this；clearInterval(timss)；tims=SetInterval(function(){ if(self。offset width maxw){ self。风格。宽度=自我。offsettwidth 5 ' px} else { clearInterval(tims)；} },10);} divs[i].onmouseout=function(){ var self=this；clearInterval(tims)；timss=SetInterval(function(){ if(self。offset width minw){ self。风格。宽度=自我。offset width-5 ' px '；} else { clearInterval(timss)；} },10);} })();}}//使用方法roulMenu('con '，200，100)；/script希望本文所述对大家的Java脚本语言程序设计有所帮助。