全国咨询热线:18720358503

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

类别:企业动态 发布时间:2021-01-07 浏览人次:

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

<html xmlns="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>


下一篇:没有了

推荐阅读

网站优化带来了怎样的好处

伴随着時间的持续变化,大家发觉许多的人针对网上的网站运营是是非非常的很感兴趣的,仅仅要想有的一个非常好地曝光度得话,還是必须一定的方法的,在其中不可不用说的一个便...

2021-01-07
深圳网站建设的费用一般怎么算的?

一般来讲,基本建设网站的花费都包括下列好多个层面,以前许多顾客要想基本建设一个归属于自身的网站,可是苦于不知道道网站制作制作都是有这些花费,出示企业网站建设服务的...

2021-01-07
微信小程序价格_微信小程序完成语音识别转文字

手机微信微信小程序完成视频语音鉴别转文本作用及碰到的坑 本文关键详细介绍了微信小程序完成视频语音鉴别转文本作用,文中给大伙儿详细介绍的十分详尽,具备一定的参照...

2021-01-07
微信小程序制作网页_JS完成页面跳转与改写的方

JS完成网页页面自动跳转与更新的方式归纳 本文关键给大伙儿详细介绍了有关JS完成网页页面自动跳转与更新的方式,原文中根据实例编码详细介绍的十分详尽,对大伙儿学习培训...

2021-01-07
网站排名优化忽略的小细节有哪些

您的部位: > 新闻报道新闻资讯 > 搜索引擎排名提升忽视的小关键点有什么虽然百度搜索竟价营销推广一样还可以产生一样的实际效果,但针对大多数数中小型型的公司来讲,是沒有那...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信