基于JS如何實現類似QQ好友頭像hover時顯示資料卡的效果(推薦)
一、應用場景
鼠標hover彈出div，并且鼠標離開后不能馬上隱藏，因為這個div上還有功能入口。比如：
鼠標經過好友列表中的好友頭像時顯示資料卡的效果如下所示：
hover時顯示二維碼
二、實現
用如下這樣一個簡單的效果：鼠標hover到A上顯示B來模擬
有2種實現方式，推薦第二種，第一種有弊端下面會說。
1、方法一
原理：把觸發(fā)元素A和要顯示元素B放于同一個父級元素內，鼠標經過父級元素時觸發(fā)顯示B。這樣鼠標移動到B時仍然 處于該父級元素內，則div不會隱藏。
代碼：
<!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>
這種方法實現起來比較簡單，但需包裹一層父標簽且有個弊端：兩個元素不能有間距。
2、方法二
原理：鼠標經過A時彈出B，鼠標移出A，設置一個計時器延遲0.5s再關閉B，所以鼠標移入A時需判斷，如果有計時器則先清除計時器再顯示B。
當用戶離開觸發(fā)事件的A后，資料卡div要延時0.5秒才后關閉，用戶擁有足夠的時間進行相應的操作，當鼠標移入資料卡B，將B中之前正在計時關閉B的計時器關閉。
完整代碼如下：
<!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>
注意事項
1、觸發(fā)事件用mouseover而非mousemove。
mouseover:鼠標移入目標元素上方時觸發(fā)。
mousemove:鼠標在元素內部移動時不斷觸發(fā)。
所以用mouseover,mousemove耗資源。
更多信息可參考：http://www.cnblogs.com/starof/p/4106904.html
2、 調用timer前先聲明
若不聲明，則timer在第一次鼠標移出時才會聲明，所以第一次鼠標移入時會報錯提示timer未聲明。
3、調用mouseover事件前必須先清除定時器
若不清除，計時0.5s后會自動關閉B
三、封裝成一個通用功能
考慮到這個功能比較通用，所以封裝了一下。因為js需要處理一些兼容性問題，所以用jquery來寫。
/**
* @Description 鼠標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上去要顯示的元素
* 調用示例：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如何實現類似QQ好友頭像hover時顯示資料卡的效果(推薦)的全部內容，希望對大家有所幫助，如果大家有疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了javascript回到頂部特效，具有一定的參考價值，感興趣的朋友可以參考一下2016-07-07
這篇文章主要給大家介紹了關于微信小程序中網絡請求緩存的解決方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
非常不錯的思路，用js實現表格的隨機排序，建議大家看代碼，學習編程思路2008-09-09
這篇文章主要為大家詳細介紹了原生JS實現簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
好的朋友經常需要彈出信息，這個功能不錯2008-09-09
Promise是為了解決回調地獄問題而誕生的,它提供了優(yōu)雅的異步回調解決方案,這篇文章主要介紹了前端JavaScript經典之Promise的相關資料,需要的朋友可以參考下2024-09-09
下面小編就為大家?guī)硪黄狫S字符串長度判斷,超出進行自動截取的實例(支持中文)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了利用 spin.js 生成等待效果(js 等待效果),需要的朋友可以參考下2017-06-06
Bootstrap打造一個左側折疊菜單的系統(tǒng)模板(一)
這篇文章主要介紹了Bootstrap打造一個左側折疊菜單的系統(tǒng)模板(一)的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了基于javascript原生判斷DOM是否加載完畢,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10