基于JS如何實(shí)現(xiàn)類似QQ好友頭像hover時(shí)顯示資料卡的效果(推薦)

更新時(shí)間：2016年06月09日 10:39:02 作者：starof

通過本文給大家介紹鼠標(biāo)經(jīng)過好友列表中的好友頭像時(shí)顯示資料卡的效果，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧

一、應(yīng)用場景

鼠標(biāo)hover彈出div，并且鼠標(biāo)離開后不能馬上隱藏，因?yàn)檫@個(gè)div上還有功能入口。比如：

鼠標(biāo)經(jīng)過好友列表中的好友頭像時(shí)顯示資料卡的效果如下所示：

hover時(shí)顯示二維碼

二、實(shí)現(xiàn)

用如下這樣一個(gè)簡單的效果：鼠標(biāo)hover到A上顯示B來模擬

有2種實(shí)現(xiàn)方式，推薦第二種，第一種有弊端下面會(huì)說。

1、方法一

原理：把觸發(fā)元素A和要顯示元素B放于同一個(gè)父級(jí)元素內(nèi)，鼠標(biāo)經(jīng)過父級(jí)元素時(shí)觸發(fā)顯示B。這樣鼠標(biāo)移動(dòng)到B時(shí)仍然處于該父級(jí)元素內(nèi)，則div不會(huì)隱藏。

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover A show B</title>
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style type="text/css">
#hook { float: left; margin: 10px 0 10px 10px; width: 50px; height: 50px; background-color: #ccc; }
#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }
</style>
</head>
<body>
<div id="hoverWrap">
 <div id="hook">A</div>
 <div id="msg-box">功能模塊B</div>
</div>
<script type="text/javascript">
$("#hoverWrap").hover(function(){
 $("#msg-box").toggle();
});
</script>
</body>
</html>

這種方法實(shí)現(xiàn)起來比較簡單，但需包裹一層父標(biāo)簽且有個(gè)弊端：兩個(gè)元素不能有間距。

2、方法二

原理：鼠標(biāo)經(jīng)過A時(shí)彈出B，鼠標(biāo)移出A，設(shè)置一個(gè)計(jì)時(shí)器延遲0.5s再關(guān)閉B，所以鼠標(biāo)移入A時(shí)需判斷，如果有計(jì)時(shí)器則先清除計(jì)時(shí)器再顯示B。

當(dāng)用戶離開觸發(fā)事件的A后，資料卡div要延時(shí)0.5秒才后關(guān)閉，用戶擁有足夠的時(shí)間進(jìn)行相應(yīng)的操作，當(dāng)鼠標(biāo)移入資料卡B，將B中之前正在計(jì)時(shí)關(guān)閉B的計(jì)時(shí)器關(guān)閉。

完整代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover A show B</title>
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style type="text/css">
#hook { float: left; margin: 10px; width: 50px; height: 50px; background-color: #ccc; }
#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }
</style>
</head>
<body>
<div id="hook">A</div>
<div id="msg-box">功能模塊B</div>
<script type="text/javascript">
var timer;
$("#hook,#msg-box").bind("mouseover",showMsgBox);
$("#hook").bind("mouseout",hideMsgBox);
$("#msg-box").bind("mouseout",function(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").hide(); 
});
function showMsgBox(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").show();
}
function hideMsgBox(){
 timer=setTimeout(function(){
  $("#msg-box").hide();
 },500);
}
</script>
</body>
</html>

js部分:

<script type="text/javascript">
var timer;
$("#hook,#msg-box").bind("mouseover",showMsgBox);
$("#hook").bind("mouseout",hideMsgBox);
$("#msg-box").bind("mouseout",function(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").hide(); 
});
function showMsgBox(){
 if(timer){clearTimeout(timer);}
 $("#msg-box").show();
}
function hideMsgBox(){
 timer=setTimeout(function(){
  $("#msg-box").hide();
 },500);
}
</script>

注意事項(xiàng)

1、觸發(fā)事件用mouseover而非mousemove。

mouseover:鼠標(biāo)移入目標(biāo)元素上方時(shí)觸發(fā)。

mousemove:鼠標(biāo)在元素內(nèi)部移動(dòng)時(shí)不斷觸發(fā)。

所以用mouseover,mousemove耗資源。

更多信息可參考：http://www.cnblogs.com/starof/p/4106904.html

2、調(diào)用timer前先聲明

若不聲明，則timer在第一次鼠標(biāo)移出時(shí)才會(huì)聲明，所以第一次鼠標(biāo)移入時(shí)會(huì)報(bào)錯(cuò)提示timer未聲明。

3、調(diào)用mouseover事件前必須先清除定時(shí)器

若不清除，計(jì)時(shí)0.5s后會(huì)自動(dòng)關(guān)閉B

三、封裝成一個(gè)通用功能

考慮到這個(gè)功能比較通用，所以封裝了一下。因?yàn)閖s需要處理一些兼容性問題，所以用jquery來寫。

/**
* @Description 鼠標(biāo)hover到oHook上顯示oMsgBox。
* @Author  liuxiaoyan 
* @Date  2016-03-24 15:01:13
* @Last Modified by: liuxiaoyan
* @Last Modified time: 2016-03-24 15:01:13
*/
/**
* @param oHook:要hover上去的元素
* @param oMsgBox:hover上去要顯示的元素
* 調(diào)用示例：hoverShowMsg.init({hook:$(".viewPhone"),msgBox:$(".viewPhonescan")});
*/
var hoverShowMsg=(function(){
 var oHook,
  oMsgBox,
  timer;
 function init(o){
  oHook=o.hook;
  oMsgBox=o.msgBox;
  bindEvent();
 }
 function bindEvent(){
  oHook.bind({
   mouseover:showMsgBox,
   mouseout:hideMsgBox
  });
  oMsgBox.bind({
   mouseover:showMsgBox,
   mouseout:function(){
   if(timer){clearTimeout(timer);}
   oMsgBox.hide();
  }
  });
 }
 function hideMsgBox(){
  timer=setTimeout(function(){
   oMsgBox.hide();
  },500);
 }
 function showMsgBox(){
  if(timer){clearTimeout(timer);}
  oMsgBox.show();
 }
 return{init:init};
})();

以上所述是小編給大家介紹的基于JS如何實(shí)現(xiàn)類似QQ好友頭像hover時(shí)顯示資料卡的效果(推薦)的全部內(nèi)容，希望對(duì)大家有所幫助，如果大家有疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: