自己练习了一个弹出框

html

 

<ul class="head" id="head">
	<li>消息</li>

</ul>

<div id="footer">
<p>你购买的宝贝 有2个物流变</p>
<p>你的交易 有1个新通知</p>
</div>

　　

css 

 

#footer {
    width: 200px;
    border: solid 1px #ccc;
    height: 50px;
    font-size: 13px;
    padding: 10px;
    position:absolute;
    top:40px;
    display:none;
}
.head li { width:100px; height:30px; background-color:#f4f4f4; line-height:30px; text-align:center;}

 

js 代码如下  

 

<script>
var list = document.getElementById("head").getElementsByTagName("li")[0];

listenEvent(list,"mouseover",show);
listenEvent(list,"mouseout",judge);

var foot = document.getElementById("footer");
var time ;
function show(){
    var isOut=true ;
    kongzhi(isOut);
}

function  judge (){
    var isOut=false  ;
    listenEvent(foot,"mouseover",function(){isOut=true;kongzhi (isOut)});
    listenEvent(foot,"mouseout",function(){isOut=false;kongzhi (isOut)});
    
    if(!isOut){kongzhi(isOut) };
}


function kongzhi (isOut){
    if(time){clearTimeout(time);}
    time = setTimeout(function (){ if(!isOut) {foot.style.display = 'none'}else {foot.style.display = "block"; }   },200) 
        
}    
// 侦听
function listenEvent(eventTarget,eventType,eventHandler){
    if(eventTarget.addEventListener){
        eventTarget.addEventListener(eventType,eventHandler)
        }
    else if (eventTarget.attachEvent){
        eventType = "on" +eventType ;
        eventTarget.attachEvent(eventType,eventHandler)
        }
    else {
        eventTarget["on"+eventType]=eventHandler;
        }
    }    
        
</script>