js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块

就好像这功能。

 

代码如下

<style>
    #div1{
        width:50px;
        height:50px;
        background:red; 
        margin-bottom:10px;
    }
    #div2{
        width:200px;
        height:200px;
        background:black;
        display:none;
    }
</style>


<body>
<div id="div1"></div>
<div id="div2"></div>
    
</body>
<script>
    window.onload=function()
    {
        var div1=document.getElementById("div1");
        var div2=document.getElementById('div2');
        var timer=null;
        div1.onmouseover= function()
        {
             div2.style.display='block';
        };

       
                div1.onmouseout= function()
                    {
                        clearTimeout(timer);
                       timer= setTimeout(function()
                        {
                             div2.style.display='none';
                        }, 500)
                    };
            div2.onmouseover=function()
            {
                clearTimeout(timer);
            };
            div2.onmouseout=function(){
                 timer=setTimeout(function(){div2.style.display='none';},500);            
            }
           
            
                    
    }
</script>

为什么要用延时器，

因为当移动另外一个模块时需要一定的时间，延时，鼠标能有一定的时间移到新的模块。

 

posted @ 2016-09-05 19:04  MrPat  阅读(449)  评论(0)    收藏  举报