JS to achieve the mouse through the user Avatar Display data card effect, you can click

based on the needs of the project. You need to create a page effect such as the following: When the user mouse through the friend list in the friend Avatar, display the friend's basic information. In fact, it is a function similar to qqclient.

On the internet to find a lot of code, basically implemented the mouse hover after the popup Div, left immediately after the disappearance. There are some pure CSS code to achieve this effect, but it is useless to me, I need to be JS ( because my data is also obtained through Ajax ), and the mouse can not be hidden immediately after leaving. There is also a function entry on this div. This page effect toss me a day. This shows that my JS and CSS technology needs to be improved ...

Search for a long time, and finally found a viable 2 ideas such as the following. There is a sample of these 2 methods, which I did not write. I didn't use it, but I turned around to share it.

。 My methods refer to the idea of method B.

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

Method A:
The floating div and trigger element A are placed inside the element of the same parent, and the mouse is triggered when it passes through the elements of the parent. The div is not hidden when the mouse moves to the div while it is still inside the element of the parent.

Method B:
Mouse over a when the Div, the mouse away from a when set a timer to close the Div, assuming the mouse moved to the DIV after clearing the timer.

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

My method is to use the idea of method B above, when the user leaves the image of the triggering event, the data card div will delay 3 seconds before closing. The user has enough time to do the corresponding operation. When the user clicks on another friend image, the hidden method is called immediately. Closes the previously opened Div that is being timed.

Here is the JS code for my method:

Show data card var beforeid;//define global variables function Showinfocard (thisobj,id) {This.hidden (Beforeid);//Hide the previous selected pop-up Divbeforeid = Id;//alert (ID);//var d = $ (thisobj);//var pos = D.offset ();//var t = pos.top + d.height ()-5; The top position of the popover//var L = pos.left-d.width ()-;  //$ ("#" +id). CSS ({"Top": T, "Left": L}). Show ();//    var Objdiv = $ ("#" +id);    $ (objdiv). CSS ("Display", "block");    $ (objdiv). CSS ("left", event.clientx-280);//Popup position x value    $ (objdiv). CSS ("top", event.clienty-10);//Popup Position y value} function Hideinfocard (ID) {//Hide div//delay 3 seconds settimeout (' Hidden (' +id+ ') ', 3000);} function hidden (ID) {$ ("#" +id). Hide ();}

here is the hidden div snippet from the HTML:

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

in HTML. The Showinfocard and Hideinfocard methods need to be called. Use the following statement to listen for mouse events:

Onmouseover= "Showinfocard (This, ' ${friend.friendid} ')" Onmouseout= "Hideinfocard (' ${friend.friendid} ')"

These are dynamic code snippets that need to be introduced into the jquery.js framework. Of course also can change into pure JS. The top is finished. Ajax get information, and then use JS in the above div to insert HTML code can be finished display, finally to Zhang preliminary, very ugly ...

(Original address: http://blog.csdn.net/zhshulin/article/details/36204089)

JS to achieve the mouse through the user Avatar Display data card effect, you can click