JS CSS实现了刷新气氛的滑动菜单效果代码

本文介绍了JS CSS实现空气清新的滑动菜单效果代码。分享给大家参考，如下：

这是一个比较新鲜的滑动导航菜单。CSS和JavaScript协同工作。当鼠标放在一级菜单上时，会滑出二级菜单。兼容性也不错。适合大多数网站。使用了两张背景图片。请复制图片地址下载图片。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题滑动导航菜单/title style body { margin 336025 px；font:12px Verdana，Arial，Helvetica } * { padd :0；保证金：0英镑.下拉列表{ float:left填充-右侧：5px} .下拉dt { width :188 pxborder :2 px固体# 9ac 1c 9 padd :8 pxfont-weight : bold；光标：指针指针；背景：url(图像/标题. gif)} .下拉dt :悬停{背景： URL(images/header _ over。gif)} .下拉dd { position:absolute绝对值飞越：隐藏；宽度宽度：208pxdisplay:none背景# fffz指数：200;opacity:0 } .下拉列表ul { width :204 pxborder :2 px固体# 9ac 1c 9 list-style : none；border-top:none} .下拉列表li {display:inline} .下拉列表a .下拉列表a :活动。下拉列表a :已访问{ display : blockpadd :5 pxcolor : # 333文本装饰：无；背景： #电弧炉0 F2；宽度：194px} .下拉列表a :悬停{背景： # d9e 1 e 4；color:#000} .下拉列表。下划线{ border-bottom :1 px solid # B9 d6dc }/style脚本类型=' text/JavaScript ' var DDSPEED=10；var DDTIMER=15函数ddMenu(id，d){ var h=document。getelementbyid(id '-ddheader ')；var c=文档。getelementbyid(id '-DD content ')；clearInterval(c . timer)；if(d==1){ clear time out(h . timer)；if(c . maxh c . maxh=c . offset theight){ return } else if(！c . maxh){ c . style。display=' block风格。高度='自动'；c . maxh=c .偏移高度；风格。高度=' 0px} c . timer=setInterval(function(){ ddSlide(c，1)}，DDTIMER)；} else { h . timer=setTimeout(function(){ ddCollapse(c)}，50)；} }函数ddCollapse(c){ c . timer=setInterval(function(){ ddSlide(c，-1)}，DDTIMER)；}函数取消隐藏(id){ var h=文档。getelementbyid(id '-ddheader ')；var c=文档。getelementbyid(id '-DD content ')；清除超时(h . timer)；clearInterval(c . timer)；if(c . offset theight c . maxh){ c . timer=setInterval(function(){ ddSlide(c，1)}，DDTIMER)；} }函数dSlide(c，d){ var curh=c .偏移距离；var distif(d==1){ dist=(数学。round((c . maxh-curr h)/DDSPEED))；} else { dist=(Math。round(curr hh/DDSPEED))；} if(dist=1d==1){ dist=1；} c .风格。高度=currh(dist * d)‘px’；风格。不透明度=curr hh/c . maxh；c.style.filter='alpha(不透明度='(curr hh * 100/c . maxh)')'；if((currh 2 d！=1)| |(currh(c . maxh-2)d==1)){ clearInterval(c . timer)；} }/script/head MDL class=' drop down ' dt id=' one-ddheader ' on mouse over=' ddMenu '(one，1)' on mouseout=' ddMenu '(one，-1)'源码下载/dt DD id=' one-DD content ' on mouse over=' cancel hide '(one ')' on mouse out=' ddMenu '(one '，-1 ')ul lia href=' # 类='下划线'最新源码/a/li lia下划线'下载排行/a/li lia下划线'脚本资源/a/li lia href='#'Ajax实例/a/Li/ul/DD/dldl class=' down ' dt id=' two-ddheader ' on mouse over=' ddMenu '(two，1)' on mouseout=' ddMenu '(two '，-1)'网页特效/dt DD id=' two-DD content ' on mouse over=' cancel hide '(two ')' on mouse out=' ddMenu '(two '，-1 ')ul lia href=' # ' class='下划线'菜单导航/a/li lia下划线'层和布局/a/li lia下划线'图片特效/a/li /ul /dd/dl/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。