#延时提示框效果

最新推荐文章于 2021-06-10 16:31:12 发布

Venciki

最新推荐文章于 2021-06-10 16:31:12 发布

阅读量155

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/90552906

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

Javascript学习

延时提示框效果

简单说明：

定时器(

setInterval （函数，时间ms）间隔型，一直

进行（一旦开启就会一直进行下去）

setTimeout（函数，时间ms）延时行，开启后只执行一次。

停止计时器:

clearInterval

clearTimeout

)

											运用 js 的简单的事件效果
											运用**开始计时器**和**结束计时器**

我们看看效果：

在这里插入图片描述

意思就是（需要满足的要求）：

当鼠标移动到红区域上面的时候下面灰色的框会显示出来
当鼠标从红区域移动到灰区域上面时灰区域不消失
当鼠标移除灰色区域和红色区域的时候灰色区域会消失

下面看代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
			height: 30px;
			width: 200px;
			background-color:red;
		}
		#div2{
			height: 20px;
			width: 150px;
			background: #ccc;
			margin: 5px;
			display: none;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<script type="text/javascript">
		window.onload=function(){
			var oDiv1=document.getElementById('div1');
			var oDiv2=document.getElementById('div2');
			var timer=null;

			function show(){
				oDiv2.style.display='block';
				clearTimeout(timer);
			}
			function hide(){
				timer=setTimeout(function(){
					oDiv2.style.display='none';
				},300)
			}

			oDiv1.onmouseover=show;
			oDiv1.onmouseout=hide;
			oDiv2.onmouseover=show;
			oDiv2.onmouseout=hide;
		}
	</script>
</body>
</html>

说明：

一般做的时候他会出现好多种情况

就是你鼠标移除红区域还没等到移到灰区域的时候灰区域就消失了
然后在一个问题就是当你鼠标在灰区域的时候然后再移出的时候，灰框不会消失。

解决这些问题就要用到计时器

解决第一个问题就可以开启一个定时器让鼠标移除红后块灰块会消失的函数中开启一个定时器让它 300ms 后开启，这样就可以当你鼠标从红区域移动到灰区域的时候他不会消失。

解决第二个问题就是再鼠标移入的函数里写一个结束定时器，让上一个的定时器结束 ClearTimeout 。

这个问题解决了。

这样一个简单的延时提示框效果就做好了。

其中的 js 代码还可以简化

							它可以这样写：
							oDiv1.onmouseover=oDiv2.onmouseover=function(){}
							//双等

简化后的代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
			height: 30px;
			width: 200px;
			background-color:red;
		}
		#div2{
			height: 20px;
			width: 150px;
			background: #ccc;
			margin: 5px;
			display: none;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<script type="text/javascript">
		window.onload=function(){
			var oDiv1=document.getElementById('div1');
			var oDiv2=document.getElementById('div2');
			var timer=null;

			oDiv1.onmouseover=oDiv2.onmouseover=function(){
				oDiv2.style.display='block';
				clearTimeout(timer);
			}
			oDiv1.onmouseout=oDiv2.onmouseout=function(){
				timer=setTimeout(function(){
					oDiv2.style.display='none';
				},300)
			}
		}
	</script>
</body>
</html>

Venciki

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
#延时提示框效果

Javascript学习延时提示框效果简单说明：定时器(setInterval （函数，时间ms）间隔型，一直进行（一旦开启就会一直进行下去）setTimeout（函数，时间ms）延时行，开启后只执行一次。停止计时器:clearIntervalclearTimeout) 运用 js 的简单的事件效果运用**开始计时器**和**...
复制链接

扫一扫