首页 > 代码库 > js 延迟菜单
js 延迟菜单
1.效果图
2.
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/miaov_style.css"> <script> window.onload = function(){ var aA = getByClassName(document, ‘normal‘); var aSpan = getByClassName(document, ‘float_layer‘); var timer = null; for(var i = 0; i < aA.length; i++){ aA[i].index = i; //给按钮加索引,这样与其他元素形成一个对应 aA[i].onmouseover = function(){ for(var i = 0; i < aSpan.length ; i++){ //目的是其他3个隐藏 aSpan[i].style.display = ‘none‘; } aSpan[this.index].style.display = ‘block‘;//当前的显示 clearInterval(timer);//从span移回到标题也不隐藏span }; aA[i].onmouseout = function(){ //标题鼠标移开,对应的下面的内容消失,但不能立即消失,否则鼠标永远也倒不了下面的内容上了 var This = this;//此刻this 是指 aA[i] timer = window.setTimeout(function(){ aSpan[This.index].style.display = ‘none‘; //aSpan[this.index].style.display = ‘none‘;//不能写this,此刻this指向的是window },1000); } aSpan[i].onmouseover = function(){ clearInterval(timer);//让定时器失效,span不隐藏 } aSpan[i].onmouseout = function(){ var This = this; timer = setTimeout(function(){ This.style.display = ‘none‘; //This == aSpan[i] },500); } } function getByClassName(parent, className){ var aTag = parent.getElementsByTagName("*"); var result = []; var reg = new RegExp(‘\\b‘+ className + ‘\\b‘,‘i‘); for(var i = 0; i < aTag.length; i++){ if(reg.test(aTag[i].className)){ result.push(aTag[i]); } } return result; } } </script></head><body><div id="nav"> <div class="adorn1"></div> <div class="adorn2"></div> <ul> <li> <a class="normal" href="http://www.miaov.com"><span>首页</span></a> <span class="float_layer w1 pos1"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>最近更新</span></a> <a href="http://www.miaov.com"><span>活动</span></a> <a href="http://www.miaov.com"><span>报名试听</span></a> <a href="http://www.miaov.com"><span>学员反馈</span></a> </span> </li> <li class="line"> <a class="normal" href="http://www.miaov.com"><span>关于我们</span></a> <span class="float_layer w2 pos2"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>妙味讲师</span></a> <a href="http://www.miaov.com"><span>培训方式</span></a> <a href="http://www.miaov.com"><span>培训理念</span></a> <a href="http://www.miaov.com"><span>联系我们</span></a> </span> </li> <li class="line"> <a class="normal" href="http://www.miaov.com"><span>作品</span></a> <span class="float_layer w3 pos3"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>般固</span></a> <a href="http://www.miaov.com"><span>MATRIX</span></a> <a href="http://www.miaov.com"><span>留学e网</span></a> <a href="http://www.miaov.com"><span>ECMall</span></a> </span> </li> <li class="line"> <a class="normal" href="http://www.miaov.com"><span>博客</span></a> <span class="float_layer w4 pos4"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>JS教程</span></a> <a href="http://www.miaov.com"><span>弹出层效果</span></a> <a href="http://www.miaov.com"><span>3D球面标签云</span></a> <a href="http://www.miaov.com"><span>Window计算器</span></a> </span> </li> </ul> <p><a href="http://www.miaov.com">>>更多</a></p></div></body></html>
js 延迟菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。