具备延时功能的滑动门菜单

 首页 > 网页特效 > 菜单特效 > 具备延时功能的滑动门菜单

具备延时功能的滑动门菜单

 2018-07-09  368  收藏  0 赞一个  0 真差劲  0 去评论

<!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=utf-8">
<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>

<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

鼠标感应时间延迟的滑动门菜单，其实也就是一滑动门，只不过鼠标在移上后不是立即反应，而是稍微迟缓了一下，这样用也是有好处的，这个时间根据你的喜好是可以调整的，本滑动门你可轻易修改外观，把它变成一个内容扩展的菜单。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行