2015.7.11js-09(延时提示框)

1.延时提示框原理：主要用到setTimeout定时期来设置间隔时间后才执行事件。

2.案例，1.简单的移入div1后显示div2，移出div2时设置setTimeout延时后再消失。

 　　     2.在移入div2时将setTimeout定时期清除，这样div2就不会消失，当移出div2时又设置setTimeout延时，这样就不会发再从div2移动div1时，div2先消失再显示的闪现情况出现。

　　　　3.然后再简化代码

window.onload = function(){
    var oTitle = document.getElementById("title");
    var oContent = document.getElementById("content");
    var Timer = null;

    oTitle.onmouseover = function(){
        clearTimeout(Timer);                //清除由Content的div移入的定时器
        oContent.style.display = "block";        
    }

    oTitle.onmouseout = function(){
        Timer = setTimeout(function(){        //Content的div设置setTimerout的延时消失
            oContent.style.display = "none";
        },300)
    }

    oContent.onmouseover = function(){
        clearTimeout(Timer);                //移入Content的div时清除定时器
        oContent.style.display = "block";
    }

    oContent.onmouseout = function(){
        Timer = setTimeout(function(){        //从Content的div移出时设置setTimerout的延时消失
            oContent.style.display = "none";
        },300)
    }
}

//简化代码,js里可以使用连等形式的函数，如：a=b=c=3;

　　oTitle.onmouseover =oContent.onmouseover = function(){
　　　　clearTimeout(Timer);
　　　　oContent.style.display = "block";
　　}

　　oTitle.onmouseout = oContent.onmouseout = function(){
　　　　Timer = setTimeout(function(){
　　　　　　oContent.style.display = "none";
　　　　},300)
　　}

 

<div id="wrap">
    <div id="title"></div>
    <div id="content"></div>
</div>