js鼠标滑过展开下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js鼠标滑过展开下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js鼠标滑过展开下拉菜单</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#fff;}
/*导航菜单*/
#nav{width:950px;margin:20px auto;height:40px;line-height:40px;background:url('images/nav-bg.png');display:block;overflow:hidden;}
#navMenu ul{width:950px;float:left;height:40px;}
#navMenu li{float:left;font-size:14px;}
#navMenu li a{color:#fff!important;text-decoration:none;width:91px;height:40px;line-height:40px;text-align:center;background-image:url('images/navbg.png');display:block;}
#navMenu li a.last{width:92px;}
#navMenu li a.current{background-position:0 -80px;width:91px;height:40px;line-height:40px;text-align:center;display:block;color:#fff;}
#navMenu li a:hover{background-position:0 -40px;}
/*-------- 下拉菜单 --------------*/
.dropMenu{position:absolute;top:0;z-index:100;visibility:hidden;margin-top:-2px;border:1px solid #0e2c5e;border-top:0;background-color:#cbdef4;padding:4px;width:260px;}
.dropMenu li{float:left;width:130px;height:32px;}
.dropMenu li a{display:block;padding:5px 0 5px 12px;color:#0f335d;}
.dropMenu a:hover{text-decoration:underline;color:#000;}
</style>

	<div id="nav">
		<ul id="navMenu">
			<li><a href="#">首页</a></li>
			<li><a href="#" rel='dropmenu1'>jquery 特效</a></li>
			<li><a href="#" rel='dropmenu2'>js特效</a></li>
			<li><a class="current" href="#" rel='dropmenu3'>flash特效</a></li>
			<li><a href="#" rel='dropmenu4'>div+css教程</a></li>
			<li><a class="last" href="#" rel='dropmenu5'>html5教程</a></li>
		</ul>
	</div>

	<script type='text/javascript' src='js/dropdown.js'></script>

	<ul id="dropmenu1" class="dropMenu">
		<li><a href="#">jquery图片特效</a></li>
		<li><a href="#">jquery导航菜单</a></li>
		<li><a href="#">jquery选项卡特效</a></li>
		<li><a href="#">jquery文字特效</a></li>
		<li><a href="#">jquery表单特效</a></li>
		<li><a href="#">jquery表格特效</a></li>
	</ul>
	<ul id="dropmenu2" class="dropMenu">
		<li><a href="#">js图片特效</a></li>
		<li><a href="#">js导航菜单</a></li>
		<li><a href="#">js选项卡特效</a></li>
		<li><a href="#">js文字特效</a></li>
		<li><a href="#">js表单特效</a></li>
		<li><a href="#">js表格特效</a></li>
	</ul>
	<ul id="dropmenu3" class="dropMenu">
		<li><a href="#">flash图片特效</a></li>
		<li><a href="#">flash导航菜单</a></li>
		<li><a href="#">flash文字特效</a></li>
	</ul>
	<ul id="dropmenu4" class="dropMenu">
		<li><a href="#">div+css布局</a></li>
		<li><a href="#">div+css菜单</a></li>
		<li><a href="#">css3教程</a></li>
	</ul>
	<ul id="dropmenu5" class="dropMenu">
		<li><a href="#">html5特效</a></li>
		<li><a href="#">html5图表</a></li>
	</ul>
	<script type="text/javascript">cssdropdown.startchrome("navMenu")</script> 
</body>
</html>

JS代码(dropdown.js):

var cssdropdown={
	disappeardelay:250,disablemenuclick:false,enableswipe:1,enableiframeshim:1,dropmenuobj:null,ie:document.all,firefox:document.getElementById&&!document.all,swipetimer:undefined,bottomclip:0,getposOffset:function(what,offsettype){
	var totaloffset=(offsettype=="left")? what.offsetLeft:what.offsetTop;
	var parentEl=what.offsetParent;
	while (parentEl!=null){
	totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft:totaloffset+parentEl.offsetTop;
	parentEl=parentEl.offsetParent;
}
return totaloffset;
}
,swipeeffect:function(){
	if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
	this.bottomclip+=10+(this.bottomclip/10)this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"}
elsereturnthis.swipetimer=setTimeout("cssdropdown.swipeeffect()",10)}
,showhide:function(obj,e){
	if (this.ie || this.firefox)this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
	if (this.enableswipe==1){
	if (typeof this.swipetimer!="undefined")clearTimeout(this.swipetimer)obj.clip="rect(0 auto 0 0)"this.bottomclip=0this.swipeeffect()}
obj.visibility="visible"}
else if (e.type=="click")obj.visibility="hidden"}
,iecompattest:function(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement:document.body}
,clearbrowseredge:function(obj,whichedge){
	var edgeoffset=0if (whichedge=="rightedge"){
	var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15:window.pageXOffset+window.innerWidth-15this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidthif (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth}
else{
	var topedge=this.ie && !window.opera? this.iecompattest().scrollTop:window.pageYOffsetvar windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15:window.pageYOffset+window.innerHeight-18this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeightif (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){
	edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeightif ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure)edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge}
}
return edgeoffset}
,dropit:function(obj,e,dropmenuID){
	if (this.dropmenuobj!=null)this.dropmenuobj.style.visibility="hidden"this.clearhidemenu()if (this.ie||this.firefox){
	obj.onmouseout=function(){
	cssdropdown.delayhidemenu()}
obj.onclick=function(){
	return !cssdropdown.disablemenuclick}
this.dropmenuobj=document.getElementById(dropmenuID)if(!this.dropmenuobj) return;
	this.dropmenuobj.onmouseover=function(){
	cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){
	cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){
	cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style,e)this.dropmenuobj.x=this.getposOffset(obj,"left")this.dropmenuobj.y=this.getposOffset(obj,"top")this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj,"rightedge")+"px"this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj,"bottomedge")+obj.offsetHeight+1+"px"this.positionshim()}
}
,positionshim:function(){
	if (this.enableiframeshim && typeof this.shimobject!="undefined"){
	if (this.dropmenuobj.style.visibility=="visible"){
	this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"this.shimobject.style.left=this.dropmenuobj.style.leftthis.shimobject.style.top=this.dropmenuobj.style.top}
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block":"none"}
}
,hideshim:function(){
	if (this.enableiframeshim && typeof this.shimobject!="undefined")this.shimobject.style.display='none'}
,contains_firefox:function(a,b){
	while (b.parentNode)if ((b = b.parentNode) == a)return true;
	return false;
}
,dynamichide:function(e){
	var evtobj=window.event? window.event:eif (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))this.delayhidemenu()else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget,evtobj.relatedTarget))this.delayhidemenu()}
,delayhidemenu:function(){
	this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden';
	cssdropdown.hideshim()",this.disappeardelay)}
,clearhidemenu:function(){
	if (this.delayhide!="undefined")clearTimeout(this.delayhide)}
,startchrome:function(){
	for (var ids=0;
	ids<arguments.length;
	ids++){
	var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")for (var i=0;
	i<menuitems.length;
	i++){
	if (menuitems[i].getAttribute("rel")){
	var relvalue=menuitems[i].getAttribute("rel")menuitems[i].onmouseover=function(e){
	var event=typeof e!="undefined"? e:window.eventcssdropdown.dropit(this,event,this.getAttribute("rel"))}
}
}
}
if (window.createPopup && !window.XmlHttpRequest){
	document.write('<IFRAME id="iframeshim" src="" style="display:none;
	left:0;
	top:0;
	z-index:90;
	position:absolute;
	filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')this.shimobject=document.getElementById("iframeshim")}
}
}

附件:下载该文件资源,减少时间成本(增值服务)