javascript实现多栏闭合展开式广告位菜单效果实例

本文实例讲述了爪哇岛描述语言实现多栏闭合展开式广告位菜单效果。分享给大家供大家参考。具体如下：

从操作方式上来说，有似曾相识的感觉，有点手风琴菜单的味道，像一个折叠面板，用Java脚本语言和半铸钢钢性铸铁(铸造半钢)结合来实现，虽然不华丽，但很简洁实用，也算是给喜欢网页特效的朋友们一个可参考素材吧。

运行效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题多栏闭合展开式广告位（菜单)/title meta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '/样式类型=' text/CSS '！-* { margin :0；划水：0;font-size :12 px}ul、李{列表式：无；} .clearfix:after在{content:'之后。显示：块；高度：0;clear:both可见性：隐藏；}.clear fix { zoom :1 } # DD { width :303 px高度：80 pxmargin :50 px auto 0 auto order :1 px固体# cccborder-right : none；飞越：隐藏；} # dd li { float:left宽度：50 px高度：80 px飞越：隐藏；右边框：1px实心# CCC } # DD Li span { width :50 pxdisplay : in-block；文本对齐：居中；线高：80 px} # DD Li p { width :150 pxdisplay : inline-block；} # DD李。在{ width :200 px} # ii { width :303 pxmargin 33605 px auto 0 auto } # ii Li { float : left宽度：10 px高度：10pxmargin:0 1px背景# ccc文本对齐：居中；线高：10 px光标：指针指针；} # ii Li . on { background : # 6CF }-/style/head dyul id=' DD ' class=' clear fix ' lispan表一/spanp常用动态服务器页面函数大全br /学习必备资料/p/li lispan表二/spanp十大jquery特效br /惊天秘密，不容错过/p/li lispan表三/spanpAjax交互改革br /Ajax带给你空前体验/p/Li/ulul id=' ii ' class=' clear fix ' li1/Li Li 2/Li Li/ulscript type=' text/JavaScript '！-函数newSlider(){ var dl=document。getelementbyid(' DD ').getElementsByTagName(' Li ')；var il=文档。getelementbyid(' ii ').getElementsByTagName(' Li ')；var dlen=dl.lengthvar timer=null，index=0，autoTime=3000//计时器定时器，索引当前显示的是第几个自动时间自动切换时间' dl[0].在' il[0]上.类名=' on//切换函数功能发挥(j){ index=j；stop AutO()；//停止计时for(var I=0；闲置；i ){ dl[i].类名=il[i].dl[j].类名=' onil[j].类名=' onstartAutO()；//重新开始计时}//鼠标悬停表切换for(var I=0；闲置；i ){ dl[i].onmouseover=function(j){ return function(){ play(j)；} }(我)}//点击按钮切换for(var I=0；闲置；i ){ il[i].onclick=function(j){ return function(){ play(j)；} }(i) } //自动切换开始function StartAutO(){ timer=SetInterval(function(){ index；index=indexdlen-1？0:索引播放（索引);},自动输入法);} //自动切换停止函数stopAuto(){ clearInterval(计时器);} //启动自动切换startAuto()}窗口。onload=function(){ newSlider()；}/////脚本/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。