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