网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> 鼠标感应延时功能的滑动门菜单
鼠标感应延时功能的滑动门菜单
作者:admin 发布时间:2010-11-27 9:07:37 发布人: admin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标感应延时功能的滑动门菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .CMS{font-size:12px;width:200px;line-height:30px;} .CMS ul,li{list-style:none;margin:0px;padding:0px;} .CMS .TabTop{clear:both;height:30px;} .CMS .TabTop ul{color:#FFF;height:30px;} .CMS .TabTop li{display:inline;width:50px;height:30px;float:left;text-align:center;cursor:pointer;} .CMS .Con_id{clear:both;background:#FF9900;height:70px;text-align:center;} .CMS .ul_id1 {background:#000000;} .CMS .ul_id1 .Li_id0{color:#FFFF00;} .CMS .ul_id2 {background:#FF6600;} .CMS .ul_id2 .Li_id1{color:#FFFF00;} .CMS .ul_id3 {background:#3366FF;} .CMS .ul_id3 .Li_id2{color:#FFFF00;} .CMSbox{} </style> <script language="javascript"> //获取可操作的ID function GetObj(objID){ if(document.getElementById){ return eval('document.getElementById("' + objID + '")'); } else{ if(document.layers){ return eval("document.layers['" + objID + "']"); } else{ return eval('document.all.' + objID); } } } var Me; function TagTab(arr){ this.curTab=arr[0]; this.arr = arr; for(var i=0;i<arr.length;i++){ var lis = arr[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++){ lis[j].tag=j; lis[j].fac=this; lis[j].onmouseover =function(){ Me=this; window.setTimeout("Me.fac.show("+this.tag+");",MDelayTime); } } } this.show = function(i){ this.curTab.style.display='none'; this.arr[i].style.display = 'block'; this.curTab = this.arr[i]; } } window.onload=function(){ var oneTab = new TagTab([GetObj("Con_id0"),GetObj("Con_id1"),GetObj("Con_id2")]); var twoTab = new TagTab([GetObj("Con_id3"),GetObj("Con_id4"),GetObj("Con_id5")]); } //延迟标签 var MDelayTime=300; </script> </head> <body> <div class="CMS" id="CMS_id0"> <div class="Con_id" id="Con_id0"> <div class="TabTop"> <ul class="ul_id1"> <li class="Li_id0" id="Tab_id0">上海</li> <li class="Li_id1" id="Tab_id1">北京</li> <li class="Li_id2" id="Tab_id2">广州</li> </ul> </div> <div class="CMSbox">上海的内容</div> </div> <div class="Con_id" id="Con_id1" style="display:none;"> <div class="TabTop"> <ul class="ul_id2"> <li class="Li_id0" id="Tab_id0">上海</li> <li class="Li_id1" id="Tab_id1">北京</li> <li class="Li_id2" id="Tab_id2">广州</li> </ul> </div> <div class="CMSbox">北京的内容</div> </div> <div class="Con_id" id="Con_id2" style="display:none;"> <div class="TabTop"> <ul class="ul_id3"> <li class="Li_id0" id="Tab_id0">上海</li> <li class="Li_id1" id="Tab_id1">北京</li> <li class="Li_id2" id="Tab_id2">广州</li> </ul> </div> <div class="CMSbox">广州的内容</div> </div> </div> <br> <div class="CMS" id="CMS_id1"> <div class="Con_id" id="Con_id3"> <div class="TabTop"> <ul class="ul_id1"> <li class="Li_id0" id="Tab_id3">广东</li> <li class="Li_id1" id="Tab_id4">江苏</li> <li class="Li_id2" id="Tab_id5">山东</li> </ul> </div> <div class="CMSbox">广东的内容</div> </div> <div class="Con_id" id="Con_id4" style="display:none;"> <div class="TabTop"> <ul class="ul_id2"> <li class="Li_id0" id="Tab_id3">广东</li> <li class="Li_id1" id="Tab_id4">江苏</li> <li class="Li_id2" id="Tab_id5">山东</li> </ul> </div> <div class="CMSbox">江苏的内容</div> </div> <div class="Con_id" id="Con_id5" style="display:none;"> <div class="TabTop"> <ul class="ul_id3"> <li class="Li_id0" id="Tab_id3">广东</li> <li class="Li_id1" id="Tab_id4">江苏</li> <li class="Li_id2" id="Tab_id5">山东</li> </ul> </div> <div class="CMSbox">山东的内容</div> </div> </div> </body> </html>
鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
同时布局在单个页面中的两个简洁美观的Tab滑动门菜单
下一篇:文章:
支付宝样式美观的CSS下拉圆角效果导航菜单
本类浏览排行 »
支付宝样式美观的CSS下拉圆角效果导航菜单..
鼠标感应延时功能的滑动门菜单
同时布局在单个页面中的两个简洁美观的Ta..
css模拟按钮效果的导航菜单
利用CSS的Clip属性来创造多彩文字
JS实现Li列表的无缝垂直文字滚动代码
文字从页面顶部掉下来
荧光效果不断闪动的文字
本站推荐文章 »
JS实现Li列表的无缝垂直文字滚动代码
带关闭功能的网站顶部滑出的广告提示条
漂亮的404错误页面
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单