信鸽网

js setTimeout实现延迟关闭弹出层

  作者：bea

<%@ 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.



<%@ 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 id="flyout" onmouseout="mouseOutEvent()" onmouseover="mouseOverEvent()">
This is a flyout
</div>
</form>
</body>
</html>




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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: