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

標籤：js   資料卡   div顯示和隱藏   jquery   css   

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

       網上找了很多代碼，基本都實現了滑鼠懸浮之後彈出div，離開之後馬上就消失了。還有些純CSS的代碼實現了這樣的效果，但是對我沒用，我需要的是JS的（因為我的資料還要通過Ajax取得），並且滑鼠離開後不能馬上隱藏，這個div上還有功能入口。這個頁面效果折騰了我一天，由此可見我的JS和CSS技術有待提高...

       搜尋了好久，終於發現了可行的2個思路如下，這2個方法有個例子，不是我寫的，我也沒用到，轉過來分享一下。。我的方法參考了方法B的思路。

—————————————————————————————————————————————————————————————————————————————

方法A：
把浮動div和觸發元素a放於同一個父級元素內，滑鼠經過父級元素時觸發顯示。這樣滑鼠移動到div時仍然 處於該父級元素內，則div不會隱藏。

方法B：
滑鼠經過a時彈出div，滑鼠離開a時設定一個計時器用來關閉div，如果滑鼠移動到div後則清除計時器。

—————————————————————————————————————————————————————————————————————————————

            我這個方法就是採用了上面方法B的思想，當使用者離開觸發事件的映像後，資料卡div要延時3秒才後關閉，使用者擁有足夠的時間進行相應的操作，當使用者點擊其他好友映像時，則會立刻調用hidden方法，將之前的開啟正在計時的div關閉。

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

//顯示資料卡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程式碼片段：

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