明霞山资源网 Design By www.htccd.com
本文实例讲述了JS实现具备延时功能的滑动门菜单效果。分享给大家供大家参考。具体如下：
这是一款鼠标感应时间延迟的滑动门菜单，其实也就是一滑动门，只不过鼠标在移上后不是立即反应，而是稍微迟缓了一下，这样用也是有好处的，这个时间根据你的喜好是可以调整的，本滑动门你可轻易修改外观，把它变成一个内容扩展的菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/
具体代码如下：
<!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">
<!--Con_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>
<!--Con_id1-->
<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>
<!--Con_id2-->
<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">
<!--Con_id0-->
<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>
<!--Con_id1-->
<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>
<!--Con_id2-->
<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>
希望本文所述对大家的JavaScript程序设计有所帮助。
标签：
JS,延时功能,滑动门菜单
明霞山资源网 Design By www.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。