快捷導(dǎo)航

JS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)好友列表中的好友頭像時(shí)顯示資料卡的效果

更新時(shí)間：2014年07月02日 15:59:55 投稿：whsnow

需求為當(dāng)用戶(hù)鼠標(biāo)經(jīng)過(guò)好友列表中好友頭像時(shí)，顯示該好友的基本資料，其實(shí)也就是類(lèi)似QQ客戶(hù)端的那種功能，下面是具體的實(shí)現(xiàn)思路及過(guò)程

基于項(xiàng)目的需要，需要制作出如下的一種頁(yè)面效果：當(dāng)用戶(hù)鼠標(biāo)經(jīng)過(guò)好友列表中好友頭像時(shí)，顯示該好友的基本資料，其實(shí)也就是類(lèi)似QQ客戶(hù)端的那種功能。

網(wǎng)上找了很多代碼，基本都實(shí)現(xiàn)了鼠標(biāo)懸浮之后彈出div，離開(kāi)之后馬上就消失了。還有些純CSS的代碼實(shí)現(xiàn)了這樣的效果，但是對(duì)我沒(méi)用，我需要的是JS的（因?yàn)槲业臄?shù)據(jù)還要通過(guò)Ajax取得），并且鼠標(biāo)離開(kāi)后不能馬上隱藏，這個(gè)div上還有功能入口。這個(gè)頁(yè)面效果折騰了我一天，由此可見(jiàn)我的JS和CSS技術(shù)有待提高...

搜索了好久，終于發(fā)現(xiàn)了可行的2個(gè)思路如下，這2個(gè)方法有個(gè)例子，不是我寫(xiě)的，我也沒(méi)用到，轉(zhuǎn)過(guò)來(lái)分享一下，演示地址。我的方法參考了方法B的思路。

方法A：

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

方法B：

鼠標(biāo)經(jīng)過(guò)a時(shí)彈出div，鼠標(biāo)離開(kāi)a時(shí)設(shè)置一個(gè)計(jì)時(shí)器用來(lái)關(guān)閉div，如果鼠標(biāo)移動(dòng)到div后則清除計(jì)時(shí)器。
—————————————————————————————————————————————————————————————————————————————

我這個(gè)方法就是采用了上面方法B的思想，當(dāng)用戶(hù)離開(kāi)觸發(fā)事件的圖像后，資料卡div要延時(shí)3秒才后關(guān)閉，用戶(hù)擁有足夠的時(shí)間進(jìn)行相應(yīng)的操作，當(dāng)用戶(hù)點(diǎn)擊其他好友圖像時(shí)，則會(huì)立刻調(diào)用hidden方法，將之前的打開(kāi)正在計(jì)時(shí)的div關(guān)閉。

下面給出我的方法的JS代碼：

//顯示資料卡 
var beforeId; //定義全局變量 
function showInfoCard(thisObj,id){ 
this.hidden(beforeId); //立刻隱藏前一個(gè)選中彈出來(lái)的div 
beforeId = id; 
// alert(id); 
// var d = $(thisObj); 
// var pos = d.offset(); 
// var t = pos.top + d.height() - 5; // 彈出框的上邊位置 
// var l = pos.left - d.width() - 600; // 彈出框的左邊位置 
// $("#"+id).css({ "top": t, "left": l }).show(); 
// 

var objDiv = $("#"+id); 

$(objDiv).css("display","block"); 

$(objDiv).css("left", event.clientX-280); //彈出框的位置X值 

$(objDiv).css("top", event.clientY-10); //彈出框位置Y值 
} 
function hideInfoCard(id){ //隱藏div 
//延時(shí)3秒 
setTimeout('hidden('+id+')',3000); 
} 

function hidden(id){ 
$("#"+id).hide(); 
}

下面是HTML中的隱藏的div代碼片段：

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

在HTML中，需要調(diào)用showInfoCard和hideInfoCard方法，使用以下語(yǔ)句監(jiān)聽(tīng)鼠標(biāo)事件：

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')"

這些都是動(dòng)態(tài)的代碼片段，采用的時(shí)候需要引入jquery.js框架，當(dāng)然也可以修改成純JS的。上面的完成了，AJAX取得信息，然后利用JS在上面div中插入HTML代碼即可完成顯示，最后來(lái)張初步的效果圖，挺丑的...

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

JS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)好友列表中的好友頭像時(shí)顯示資料卡的效果

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具