原生js和jq的延時提醒框 （QQ頭像為例）

Tseven發表於2019-02-26
JS

首先說明一下效果：滑鼠放到頭像上面左邊會顯示一塊個人資料框，離開頭像後過一小段時間個人資料資訊消失，離開頭像後如果滑鼠放在個人資料框上面則個人資料框不消失；
html程式碼：一個id為head的標籤和一個id為left的標籤 這兩個就足以完成下來的效果；

#head相當於頭像；#left相當於個人資料框(一開始是隱藏的 display:none;)；css樣式就不寫了，直接寫js
原生js：
首先獲取dom節點

  var Head = document.getElementById("head");
  var Left = document.getElementById("left");
複製程式碼

有滑鼠的移入移出動作 所以要用到onmouseover（滑鼠移入）和onmouseout（滑鼠移出）兩個事件
先來寫移入事件：

  Head.onmouseover = function(){
	 Left.style.display = "block";
  }
  滑鼠放在Head上面則Left顯示  新增css屬性display：block；
複製程式碼

下來要分析一下了：滑鼠離開頭像之後Left不能立即消失，所以這塊要用到延時器（setTimeout） ； 滑鼠離開頭像之後我們還要做一個判斷 滑鼠是否移入了Left，所以要做一個開關（就是給一個變數進行判斷）
先從簡單的來寫一點點往上加，先不做是否移入Left判斷那麼移出Head應該這麼寫：

Head.onmouseout = function(){
	setTimeout(function(){   //延時一秒讓Left消失
			Left.style.display = "none";
	},1000);
}
複製程式碼

下來我們就要寫開關了 判斷滑鼠離開頭像之後是否進入Left

var isIndom = false;  //給一個變數 用它來模擬開關 通過判斷變數我們就可以知道滑鼠是否移入Left
Left.onmouseover = function(){  //如果滑鼠移入Left 則將isIndom改為true
	isIndom = true; 
}
Left.onmouseout = function(){   //滑鼠移出Left 則將isIndom改為flase並將Left隱藏  this指向Left
	isIndom = false;          
	this.style.display = "none";
}
複製程式碼

最後要給Head的滑鼠移出事件裡面加上判斷就可以了 在inIndom == flase的時候選擇隱藏Head

 Head.onmouseout = function(){
	setTimeout(function(){   //延時一秒讓Left消失
	    if(!isIndom){
	        Left.style.display = "none";
	    }	
	},1000);
}
複製程式碼

上面就是原生js寫的延時提醒框 下來用jq寫一個同樣的效果
在jq中滑鼠移入移出事件分別是 mouseover() mouseout();

$("#head").mouseover(function(){  //$()獲取節點
	$("#left").fadeIn(2000);  //fadeIn是jq一個顯示效果(漸現) 也是為了讓Head顯示只是方式不同而已
})
複製程式碼

下來還是要寫一個開關 這次我們將開關封裝起來

var isIndom = flase; //定義全部變數 isIndom(開關)
function switch0(){
	$("#left").mouseover(function(){
		isIndom = true;
	});
	$("#left").mouseout(function(){
		isIndom = false;
		$("#left").fadeOut(1000);
	});
}
switch0函式所執行出來的isIndom就是我們要的值
最後寫滑鼠移出Head事件
$("#head").mouseout(function(){
	switch0();  //先執行switch0函式  得到isIndom的值
	setTimeout(function(){
		if(!isIndom){
			$("#left").fadeOut(1000); //fadeOut()和fadeIn()對應是jq一個消失的效果(漸隱)
		}
	},1000);
})
複製程式碼

相關文章