JS實現滑鼠經過帳戶圖片顯示資料卡的效果，可點擊

基於項目的需要，需要製作出如下的一種頁面效果：當使用者滑鼠經過好友名單中好友頭像時，顯示該好友的基本資料，其實也就是類似QQ用戶端的那種功能。

網上找了很多代碼，基本都實現了滑鼠懸浮之後彈出div，離開之後馬上就消失了。還有些純CSS的代碼實現了這樣的效果，但是對我沒用，我需要的是JS的（因為我的資料還要通過Ajax取得），並且滑鼠離開後不能馬上隱藏，這個div上還有功能入口。這個頁面效果折騰了我一天，由此可見我的JS和CSS技術有待提高...<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+ICAgICAgIMvRy/fBy7rDvsOjrNbV09q3os/Wwcu/ydDQtcQyuPbLvMK3yOfPwqOs1eIyuPa3vbeo09C49sD919OjrLK7ysfO0tC0tcSjrM7S0rLDu9PDtb2jrNequf3AtLfWz+3Su8/CoaPPwtTYtdjWt6GjztK1xLe9t6iyzr+8wcu3vbeoQrXEy7zCt6GjPC9wPgo8cD6hqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqPC9wPgo8cD63vbeoQaO6PGJyPgqw0bihtq9kaXa6zbSlt6LUqsvYYbfF09rNrNK7uPa4uLy21KrL2MTao6zK87Hqvq25/bi4vLbUqsvYyrG0pbeiz9TKvqGj1eLR+crzserSxravtb1kaXbKscjUyLsgtKbT2rjDuLi8ttSqy9jE2qOs1PJkaXayu7vh0v6y2KGjPC9wPgo8cD48YnI+Cre9t6hCo7o8YnI+Csrzseq+rbn9Ycqxta+z9mRpdqOsyvOx6sDrv6phyrHJ6NbD0ru49rzGyrHG99PDwLS52LHVZGl2o6zI57n7yvOx6tLGtq+1vWRpdrrz1PLH5bP9vMbKscb3oaM8L3A+CjxwPqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoaqhqqGqoao8YnI+CjwvcD4KPHA+PGJyPgo8L3A+CjxwPiAgICAgICAgICAgIM7S1eK49re9t6i+zcrHssnTw8HLyc/D5re9t6hCtcTLvM/ro6y1sdPDu6fA67+qtKW3osrCvP61xM28z/G686Os18rBz7+oZGl20qrR08qxM8PrssW687nYsdWjrNPDu6fTtdPQ1+O5u7XEyrG85L340NDP4NOmtcSy2df3o6y1sdPDu6e147v3xuTL+7rD09HNvM/xyrGjrNTyu+HBor/MtffTw2hpZGRlbre9t6ijrL2r1q7HsLXEtPK/qtX91Nq8xsqxtcRkaXa52LHVoaM8L3A+CjxwPjxicj4KPC9wPgo8cD7PwsPmuPiz9s7StcS3vbeotcRKU7T6wuujujwvcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;">//顯示資料卡var beforeId;//定義全域變數function showInfoCard(thisObj,id){this.hidden(beforeId);//立刻隱藏前一個選中彈出來的divbeforeId = 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//延時3秒setTimeout('hidden('+id+')',3000);}function hidden(id){$("#"+id).hide();}

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

在HTML中，需要調用showInfoCard和hideInfoCard方法，使用以下語句監聽滑鼠事件：

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

這些都是動態程式碼片段，採用的時候需要引入jquery.js架構，當然也可以修改成純JS的。上面的完成了，AJAX取得資訊，然後利用JS在上面div中插入HTML代碼即可完成顯示，最後來張初步的，挺醜的...

（原文地址：http://blog.csdn.net/zhshulin/article/details/36204089）