延时弹出层控制 

[task]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>延时弹出层控制</title>
        <script type="text/javascript">
            var isPopLayer = false;
	    var time = null;
            //打开弹出层
            function poplay(){
                if(!isPopLayer){
                    //延迟1秒显示层
		    time = setTimeout(function(){
                        document.getElementById('poplay').style.display = 'block';
			clplay();
                        isPopLayer = true;
                    }, 1000);
                }
            }

	    //鼠标移走时执行
	    function clplay(){
		clearTimeout(time);
		time = null;
	    }

            //关闭弹出层
            function poclose(){
                document.getElementById('poplay').style.display = 'none';
                isPopLayer = false;
            }
        </script>

        <style type="text/css">
            #poplay{ padding:1em; position:absolute; border: 3px solid #000; display:none;}
        </style>
</head>
<body>
        <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字1</a> 这个都是测试写的
        <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字2</a> 这个都是测试写的
        <a href="#" onmouseover="poplay()" onmouseout="clplay()">文字3</a> 这个都是测试写的
        <div id="poplay">
            <p>弹出层的内容</p>
            <p>弹出层的内容</p>
            <p>弹出层的内容</p>
            <p>弹出层的内容</p>
            <button onclick="poclose()">关闭</button>
        </div>
</body>
</html>
[/task]
posted @ 2012-09-14 17:42  lines  阅读(199)  评论(0)  编辑  收藏  举报