<nobr id="t2qkn"></nobr>

js setTimeout實現延遲關閉彈出層

2019-11-21 00:37:39

字體：大中小

來源：轉載

供稿：網友

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SetTimeout.aspx.cs" Inherits="JavaScript.SetTimeout" %> <!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 runat="server"> <title></title> <style type="text/css"> #flyout { border: solid 2px Gray; background-color: #FFF999; width: 300px; height: 100px; display: none; } </style> <script type="text/javascript"> var flyoutTimer; function mouseOutEvent() { //Hide flyout after 1 second when the mouse move out of the flyout zone flyoutTimer = setTimeout(hideFlyout, 1000); } function mouseOverEvent() { //Clear the timer when the mouse move over the flyout clearTimeout(flyoutTimer); } function hideFlyout() { document.getElementById("flyout").style.display = "none"; } function showFlyout() { document.getElementById("flyout").style.display = "block"; mouseOutEvent(); } </script> </head> <body> <form id="form1" runat="server"> <div onclick="showFlyout()"> Click me to show flyout</div> <div   class="iwvjtn8m0"   id="flyout" onmouseout="mouseOutEvent()" onmouseover="mouseOverEvent()"> This is a flyout </div> </form> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：js 多瀏覽器分別判斷代碼

下一篇：JS 遮照層實現代碼