qq延时窗口学习

最新推荐文章于 2023-07-19 09:46:31 发布

mark kang

最新推荐文章于 2023-07-19 09:46:31 发布

阅读量90

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/msjlktc/article/details/90259159

版权

例一

<!DOCTYPE html>
<html>
<head>
	<title>js.xuexi</title>
	<style type="text/css">
		#div1{
			width: 300px;
			height: 50px;
			background: red;

		}
		#div2{
			margin-top: 10px;
			width: 200px;
			height: 20px;
			background: #ccc;
			display: none;
		}
	</style>
<script type="text/javascript">
	window.onload=function (){
		var oDiv1=document.getElementById('div1');
		var oDiv2=document.getElementById('div2');
		var timer=null;
		oDiv1.onmouseover=function show(){

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

	};

	
</script>
</head>
<body>
	<div id="div1">
		
	</div>
	<div id="div2">
		
	</div>
</body>
</html>

例二

在这里插入代码片

<!DOCTYPE html>
<html>
<head>
	<title>js.xuexi</title>
	<style type="text/css">
		#div1{
			width: 300px;
			height: 50px;
			background: red;

		}
		#div2{
			margin-top: 10px;
			width: 200px;
			height: 20px;
			background: #ccc;
			display: none;
		}
	</style>
<script type="text/javascript">
	window.onload=function (){
		var oDiv1=document.getElementById('div1');
		var oDiv2=document.getElementById('div2');
		var timer=null;
		oDiv1.onmouseover=function (){

			oDiv2.style.display='block';
			clearTimeout(timer);
		};
		oDiv1.onmouseout=function(){
			timer=setTimeout(function(){
				oDiv2.style.display='none';
			},300);
		oDiv2.onmouseover=function(){
			clearTimeout(timer);
		};
		oDiv2.onmouseout=function(){
			
			setTimeout(function(){oDiv2.style.display='none';},300)
		};	
		};
		

	};

	
</script>
</head>
<body>
	<div id="div1">
		
	</div>
	<div id="div2">
		
	</div>
</body>
</html>