此时情绪此时天，无事小神仙
好好生活，平平淡淡每一天

编辑

Js定时器延时触发鼠标悬浮事件

image

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>定时器之延时触发鼠标悬浮事件</title>
	<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
</head>

<style type="text/css">
	body{
		background: #BEE7E9;
		width: 100%;
		height: 100%;
	}
	.hoverDiv{
		width: 100px;
		height: 100px;
		margin: 50px;
		background: #ECAD9E;
		border: 3px solid #F4606C;
		border-radius: 9px;
		cursor: pointer;
	}
	#dialog_div{
		display: none;
		width: 100px;
		background-color: orange;
		orphans: inherit;
		z-index: 99;
	}
</style>


<body>
	<div onmouseover="hoverEvent('ok')" onmouseout="removeEvent()" class="hoverDiv">
		定时器之延时触发鼠标悬浮事件
	</div>
	<div onmouseover="hoverEvent('ok')" onmouseout="removeEvent()" class="hoverDiv">
		定时器之延时触发鼠标悬浮事件
	</div>

	<div onmouseover="hoverEvent('ok')" onmouseout="removeEvent()" class="hoverDiv">
		定时器之延时触发鼠标悬浮事件
	</div>

	<div id="dialog_div">
		动态加载模块
	</div>
</body>

<script type="text/javascript">
	// 声明定时器变量
	var monitor;
	// 传递divde DOM Event对象de中间变量(如需要动态加载div)
	var thisevent;
	// 定时器之延时触发鼠标悬浮事件
	function hoverEvent(param){
		// 把divde DOM Event对象赋值给中间变量thisevent
		thisevent = event;
		// 初始化时间
		let initialDate = new Date();
		// 相差de毫秒数
		let minseconds=0;
		// 设置返回时间(目前是ms)
		let setReturnTime = 1000;
		// 清除上一次de定时器
		window.clearInterval(monitor)
		// 定时器
		monitor = setInterval(function (){
			// 返回相差de毫秒数
			minseconds = returnDelayTime(initialDate);
			// 设置时间小于定时器de时间则结束触发功能事件
			if(setReturnTime<minseconds) {
				// 清除这一次de定时器
				window.clearInterval(monitor);
				// 延时调用de功能事件
				hoverFunctionEvent(param);
			}
		},100);
	}
	// 清除鼠标延时定时器
	function removeEvent(){
		window.clearInterval(monitor);
		// 隐藏动态加载模块
		$("#dialog_div").hide();
	}
	// 返回相差de时间
	function returnDelayTime(initialDate){
		// 初始时间
		let startTime = initialDate.getTime();
		// 获取当前时间
		let date = new Date();
		let nowTime = date.getTime();
		// 时间差de毫秒数
		let dateDiff = nowTime - startTime;
		// 计算出相差天数
		let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
		// 计算天数后剩余de毫秒数
		let leave1=dateDiff%(24*3600*1000);
		// 计算出小时数
		let hours=Math.floor(leave1/(3600*1000));
		// 计算小时后剩余de毫秒数
		let leave2=leave1%(3600*1000);
		// 计算相差分钟数
		let minutes=Math.floor(leave2/(60*1000));
		// 计算分钟数后剩余de毫秒数
		let leave3=leave2%(60*1000);
		// 计算相差秒数
		let seconds=Math.round(leave3/1000);
		// 计算秒数后剩余de毫秒数
		let minseconds=leave3%(60*1000);
		// 返回相差de毫秒数
		return minseconds;
	}
	// 显示行政班级课程表""功能事件""
	function hoverFunctionEvent(param){
		// 显示动态加载模块de内容
		let showDiv=$("#dialog_div");
		showDiv.css('position','absolute');
		showDiv.css('z-index','999');
		showDiv.html("可Ajax动态写入模块内容:"+param);
		// 根据divde DOM Event对象de中间变量thisevent动态定位
		showDiv.css('left',parseInt(thisevent.x)+5+parseInt($(document).scrollLeft())+"px");
		if(parseInt(thisevent.y)-parseInt(showDiv.height())>=0){
			showDiv.css('top',parseInt(thisevent.y)+parseInt($(document).scrollTop())-parseInt(showDiv.height())+"px");
		}else{
			let divtop = parseInt(showDiv.height())-parseInt(thisevent.y);
			showDiv.css('top',parseInt(thisevent.y)+parseInt($(document).scrollTop())-parseInt(showDiv.height())+parseInt(divtop)+"px");
		}
		showDiv.show();
	}
</script>

</html>
posted @ 2019-09-24 16:47  踏步  阅读(660)  评论(0)  编辑  收藏  举报