js setTimeout实现延迟关闭弹出层

发布于 2016-12-19 21:04:07 | 87 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

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

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

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

最新网友评论 共有(0)条评论发布评论返回顶部

js setTimeout实现延迟关闭弹出层

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他