• 技术文章 >web前端 >js教程

    javascript如何实现延时显示提示框效果的代码案例

    黄舟黄舟2017-06-04 10:37:29原创859
    这篇文章主要为大家详细介绍了javascript实现延时显示提示框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    js延时提示框效果演示:

    实现方法

    移入显示,移出隐藏

    移除延时隐藏,可以实现从第一个p移入第二个p,仍然可以显示

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <style>
    #p1 {
     width: 50px;
     height: 50px;
     background: red;
     float: left
    }
    #p2 {
     margin-left: 10px;
     width: 250px;
     height: 150px;
     background: yellow;
     float: left;
     display: none
    }
    </style>
    <script>
    window.onload=function()
    {
     var op1=document.getElementById('p1');
     var op2=document.getElementById('p2');
     var timer=null;
     op1.onmouseover=op2.onmouseover=function()
     {
     clearTimeout(timer);
     op2.style.display='block';
     };
     op1.onmouseout=op2.onmouseout=function()
     {
     timer=setTimeout(function()
     {
      op2.style.display='none';}
     ,500); 
     };
    };
    </script>
    <body>
    <p id="p1"></p>
    <p id="p2"></p>
    </body>
    </html>

    以上就是javascript如何实现延时显示提示框效果的代码案例的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:javascript请求servlet如何实现ajax的示例代码 下一篇:JavaScript创建对象的多种方式以及优缺点的深入理解
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 聊聊Angular Route中怎么提前获取数据• 简单了解JavaScript事件的冒泡、委派、绑定和传播• node.js gm是什么• 详细介绍JavaScript中Promise的基本概念及使用方法• webpack是基于node.js的吗
    1/1

    PHP中文网