延迟提示框

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延时提示框</title>
<style>
div{float:left; margin:10px;}
#div1{width:50px; height:50px; border:1px #000; background:#FF0;}
#div2{width:200px; height:200px; border:#000 2px; background:#F00; display:none;}
</style>
<script>
window.onload=function ()
{
	var oDiv1=document.getElementById(‘div1‘);
	var oDiv2=document.getElementById(‘div2‘);
	var timeout=null;
	oDiv1.onmouseover=function ()//第一个div鼠标悬浮事件
	{
		clearInterval(timeout);//关闭延迟
		oDiv2.style.display=‘block‘;//让第二个div显示
	}
	oDiv1.onmouseout=function ()//第一个div鼠标移出事件
	{
		timeout=setTimeout(function()//第二个div延迟一会,再消失
		{oDiv2.style.display=‘none‘;},500);
	}
	oDiv2.onmouseover=function()//第二个div鼠标悬浮事件
	{
		clearInterval(timeout);//关闭延迟,
		oDiv2.style.display=‘block‘;//显示
	}
	oDiv2.onmouseout=function()//鼠标移出div2,再次延迟一会消失
	{
		timeout=setTimeout(function()
						{oDiv2.style.display=‘none‘;
						},500);
	}
}
</script>
</head>

<body>
<div id="div1">

</div>
<div id="div2" >

</div>
</body>
</html>

JavaScript中存在相同函数,可以给函数起个名字,再调用,减少重复代码。

时间: 2024-10-11 17:35:32

延迟提示框的相关文章

延迟提示框(思路)

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script type="text/javascript" > 6 window.onload=function(){ 7 var oDiv1=document.getElementById("div1"); 8 var oDiv2=document.getEl

【iOS开发-56】案例BUG:按钮的enabled、控件的userInteractionEnabled以及两种提示框UIAlert和UIActionSheet

接上述案例找BUG:[iOS开发-51]案例学习:动画新写法.删除子视图.视图顺序.延迟方法.按钮多功能用法及icon图标和启动页设置 (1)BUG:答案满了就不能再点击option按钮,答案没满就能点. 在optionClick方法的if(full)中设置,即判断答案是否满了,如果满了,则: if (full) { //如果答案满了,不管是否正确,只要满了,下面的option按钮就不能被点击 for (UIButton *optionBtn in self.optionView.subview

【iOS开发-56】案例BUG:button的enabled、控件的userInteractionEnabled以及两种提示框UIAlert和UIActionSheet

接上述案例找BUG:[iOS开发-51]案例学习:动画新写法.删除子视图.视图顺序.延迟方法.button多功能使用方法及icon图标和启动页设置 (1)BUG:答案满了就不能再点击optionbutton,答案没满就能点. 在optionClick方法的if(full)中设置,即推断答案是否满了,假设满了.则: if (full) { //假设答案满了,无论是否正确,仅仅要满了,以下的optionbutton就不能被点击 for (UIButton *optionBtn in self.opt

Bootstrap提示框

前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息),title属性的优先级高 2.通过 data-p

原生js实现tooltip提示框的效果

在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的特效,就有一种想要征服它的愿望. 比如这个tooltip的效果展示: 这个便是tooltip提示框的效果. 在Hbulider上的代码展示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8

Tipso – 轻巧的jQuery提示框插件

Tooltip(提示框)是一种常见的效果,它通常用在需要进一步解释.说明或提示的某个词上.这种小效果实现起来虽然不难,但如果你想不劳而获,可以试试 Tipso. Tipso 基于 jQuery,提供了很多配置,如: 显示动画持续时间 背景颜色 文本颜色 显示位置(上/右/下/左) 宽度 偏移 加载 ajax 内容 回调函数 使用方法 1.引入文件 <link rel="stylesheet" href="css/tipso.css"> <scrip

警告提示框(AlertControl)

设置提示框的透明度 1 private void alertControl1_BeforeFormShow(object sender, 2 DevExpress.XtraBars.Alerter.AlertFormEventArgs e) 3 { 4 e.AlertForm.OpacityLevel = 1; //0为透明,1为不透明 5 } AutoFormDelay属性用来设置窗体延迟,默认7000ms. FormDisplaySpeed属性用来设置窗口显示速度 FormMaxCount数

封装jquery的ajax,便于加载等待提示框

先贴上代码. 传入4给参数,保证post,get都能执行,和普通的ajax区别在于添加了设置的timeout. 并在每一次的发送接收请求后执行dialog()方法. function AjaxRequest(apiUrl, method, param, callback) { $.ajax({ url: apiUrl, type: method, data: param, timeout: 150000, dataType: "JSON", beforeSend: function (

[UWP]在应用退出时弹出确认提示框

1. 需求 在应用退出时(点击右上角的关闭按钮)弹出一个确认按钮可以说是一个最常见的操作了,例如记事本的"你是否保存": 但这个功能在UWP上居然有点小复杂.这篇文章将解释如何实现这个功能. 2. CloseRequested 为了监视应用退出事件,我本来使用了CoreApplication.Exiting,但好像并不起作用,后来我就没再研究它的触发机制了.在Windows 10 Creators Update (15063)以后UWP提供了一个新的API:SystemNavigati