zoukankan      html  css  js  c++  java
  • 利用setTimeout实现延迟关闭弹出层

    有时候我们希望弹出层能够实现延迟关闭,并且鼠标在弹出层区域移动的时候能够保持显现,下面是具体的实现代码。

    代码
     1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SetTimeout.aspx.cs" Inherits="JavaScript.SetTimeout" %>
     2 
     3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5 <head runat="server">
     6     <title></title>
     7     <style type="text/css">
     8         #flyout
     9         {
    10             border: solid 2px Gray;
    11             background-color: #FFF999;
    12             width: 300px;
    13             height: 100px;
    14             display: none;
    15         }
    16     </style>
    17 
    18     <script type="text/javascript">
    19         var flyoutTimer;
    20         function mouseOutEvent() {
    21             //Hide flyout after 1 second when the mouse move out of the flyout zone
    22             flyoutTimer = setTimeout(hideFlyout, 1000);
    23         }
    24         function mouseOverEvent() {
    25             //Clear the timer when the mouse move over the flyout
    26             clearTimeout(flyoutTimer);
    27         }
    28         function hideFlyout() {
    29             document.getElementById("flyout").style.display = "none";
    30         }
    31         function showFlyout() {
    32             document.getElementById("flyout").style.display = "block";
    33             mouseOutEvent();
    34         }
    35     </script>
    36 
    37 </head>
    38 <body>
    39     <form id="form1" runat="server">
    40     <div onclick="showFlyout()">
    41         Click me to show flyout</div>
    42     <div id="flyout" onmouseout="mouseOutEvent()" onmouseover="mouseOverEvent()">
    43         This is a flyout
    44     </div>
    45     </form>
    46 </body>
    47 </html>
  • 相关阅读:
    面试代码基础(一)从strstr说起
    面试笔试总结(二)之 C++基础
    面试笔试总结(一)之 C++基础
    HMM代码实践
    计算两篇文章相似度代码
    主题模型
    mysql5.6.34-debug Source distribution在树莓派下编译的几个错误
    windows守护进程脚本
    fastcgi模式下设置php最大执行时间
    mysql基础知识笔记
  • 原文地址:https://www.cnblogs.com/panchunting/p/JavaScript_setTimeout.html
Copyright © 2011-2022 走看看