首页 > 其他 > 详细

延时消失的菜单---(练习有收获)

时间:2015-03-26 19:25:08      阅读:167      评论:0      收藏:0      [点我收藏+]

html:有4个li,li下分别有一个span

<script>
   window.onload=function(){
    var aLi=document.getElementsByTagName(‘li‘); 
    /*var timer=null; 全局timer的问题是:划到另一个项上,timer已被清除,上一项下拉菜单还遗留为收回,这样就是一个bug了;所以要每个li加一个timer,定义为自身的属性, 这样就只清除本身的timer ,不影响其他选项*/
    for(var i=0;i<aLi.length;i++){
    aLi[i].onmouseover=show;
    aLi[i].onmouseout=hide;
    aLi[i].getElementsByTagName(‘span‘)[0].onmouseover=show;
    aLi[i].getElementsByTagName(‘span‘)[0].onmouseout=hide; }
     
    function show(){
     clearInterval(this.timer );
     //划到另一项时,需要其他子项及时消失,so~
     for(var i=0;i<aLi.length;i++){ //记得数组下标比其长度小1,但是i<(小于),所以无需减一
      aLi[i].getElementsByTagName(‘span‘)[0].style.display=‘none‘;
     }     
     this.getElementsByTagName(‘span‘)[0].style.display=‘block‘;
     }
     
    function hide(){  
     var _this=this; 
     this.timer=setTimeout(function(){
      _this.getElementsByTagName(‘span‘)[0].style.display=‘none‘;
      },1000);   
     } 
    }
  </script>

注:timer里面不能用this

延时消失的菜单---(练习有收获)

原文:http://www.cnblogs.com/alanaZ/p/4369305.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!