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>
  • 相关阅读:
    Mybatis resultMap和resultType的区别
    根据xml文件生成javaBean
    WebService如何封装XML请求 以及解析接口返回的XML
    Java SE练习
    Maven手动将jar导入本地仓库
    【公告】【公告】【公告】【公告】
    【题解】SDOI2010地精部落
    【题解】CF559C C. Gerald and Giant Chess(容斥+格路问题)
    【题解】任务安排(斜率优化)
    【题解】Cats Transport (斜率优化+单调队列)
  • 原文地址:https://www.cnblogs.com/panchunting/p/JavaScript_setTimeout.html
Copyright © 2011-2022 走看看