开启企业建站营销新时代、免费建站平台倡导者  站长学院  高端定制请点这里
热线:13913253836
您现在的位置:首页 > 站长学院 > 建站资讯 > 建站、设计教程 > 弹出层

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

作者:eycms 日期:2016/2/16 17:41:58 人气:35

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w.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></td>

 </tr>

</table>


回到顶部