js/jQuery鼠标不动执行事件

在做图片查看器的时候遇到一个需求 鼠标不动1.5秒后隐藏图标 鼠标动了就把图标显示回来

直接上代码

//纯js
ddocument.onmousemove = (function() {
	var onmousestop = function() {
		document.querySelector(".box").style.backgroundColor='red';
	}, thread;
	return function() {
		document.querySelector(".box").style.backgroundColor='black';
		thread&&clearTimeout(thread);
		thread = setTimeout(onmousestop, 1500);
	};
})();

//jQuery
var onmousestop = function (){
	$('.box').css('background-color', 'red');
}, thread;
$('.box').on('mouseenter',function (){
	onmousestop();
}).on('mousemove',function (){
	$('.box').css('background-color', 'black');
	thread&&clearTimeout(thread);
	thread = setTimeout(onmousestop, 1500);
});

.box改成目标的document对象就行了 需求修改触发时间的话修改1500(单位毫秒)

说点什么

avatar
  Subscribe  
提醒