js延时弹出层控制效果代码

作者：简简单单 2013-11-21

提示：您可以先修改部分代码再运行

<!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/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
            #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 class="classname">弹出层的内容</p>
            <p class="classname">弹出层的内容</p>
            <p class="classname">弹出层的内容</p>
            <p class="classname">弹出层的内容</p>
            <button onclick="poclose()">关闭</button>
        </div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

js延时弹出层控制效果代码

相关文章

精彩推荐