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