弹出层代码之导航栏鼠标移动到元素弹出下拉菜单!

发布时间:2021-01-11 作者:安阳博客网 所属分类:程序代码

首先该代码是站长好友大树编辑而来,再此非常感谢大树的无私奉献,弹出层不仅可以提升客户体验,同时在制作网站时起到了重要作用,他可以让网站看起来更加规整简介,在导航栏方面弹出层更是应用非常广泛,例如鼠标移动到导航栏的某个一级栏目自动弹出下拉二级栏目菜单,下面来直接说代码.

HTML代码

<a class="yiji">
一级菜单
</a>

JS代码

		<script type="text/javascript">
			window.onload=function(){
				var arrA=document.querySelectorAll('.yiji');
				var arrDiv=document.querySelectorAll('.erji');
				
				for(let i=0;i<arrA.length;i++){
					arrA[i].index=i;
					arrA[i].onmouseover=function(){
						arrDiv[this.index].style.display='block';
					}
					arrA[i].onmouseout=function(){
						var n=this.index;
						var timer=setTimeout(hide,100);
						arrDiv[n].onmouseover=function(){
							clearTimeout(timer);
						}
						arrDiv[n].onmouseout=function(){
							timer=setTimeout(hide,100);
						}
						
						function hide(){
							arrDiv[n].style.display='none';
						}
						
					}
				}
				
				
			}
		</script>