js setTimeout实现延迟关闭弹出层

更新时间：2010年04月01日 00:00:59 作者：

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

<%@ 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需再刷新一下页面才能执行]

您可能感兴趣的文章:

js 目录列举函数
用js获取文件目录的代码，一般主要是用了区别vbs的一些代码
2008-11-11
js实现上传图片之上传前预览图片
此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了，感兴趣的各位可以参考下哈
2013-03-03
7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)
7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)...
2007-08-08
原生JS实现逼真的图片3D旋转效果详解
这篇文章主要介绍了原生JS实现逼真的图片3D旋转效果,结合实例形式详细分析了javascript实现图片3D旋转相关操作技巧与注意事项,需要的朋友可以参考下
2019-02-02
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
这篇文章主要介绍了BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码,需要的朋友可以参考下
2017-05-05
Webpack常见使用配置小结
本文主要介绍了Webpack常见使用配置小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
javascript实现设置、获取和删除Cookie的方法
这篇文章主要介绍了javascript实现设置、获取和删除Cookie的方法,涉及javascript操作cookie的常用技巧,非常简单实用,需要的朋友可以参考下
2015-06-06
通过遮罩层实现浮层DIV登录的js代码
遮罩层实现浮层DIV登录的效果，想必很多的朋友都有遇到过吧，实现起来也是很简单的，下面有个不错的实现，大家可以感受下
2014-02-02
JavaScript函数柯里化实现原理及过程
这篇文章主要介绍了JavaScript函数柯里化实现原理及过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
原生js实现图片层叠轮播切换效果
这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02