Based on JS how to achieve similar QQ friend Avatar hover when displaying the effect of information card (recommended) _javascript skills

First, the application scene

The mouse hover pop-up div, and the mouse can not hide immediately after leaving, because this div also has the function entrance. Like what:

When the mouse passes the friend avatar in the buddy list, the effect of displaying the data card is as follows:

Display two dimensional code when hover

Second, realize

With a simple effect like this: mouse hover to A to show B to simulate

There are 2 ways to implement, recommend the second, the first one has the disadvantage of the following will say.

1. Method One

Principle: the trigger element A and the element B to display are placed inside the same parent element, and the mouse triggers the display B when it passes through the parent element. This way the mouse is still inside the parent element when it moves to B, and the div is not hidden.

Code:

<! DOCTYPE html>
 
 

This method is simple to implement, but it requires a layer of parent tags and there is a disadvantage: two elements can not have spacing.

2, Method two

Principle: The mouse through a when a pop-up B, mouse out A, set a timer delay 0.5s and then close B, so the mouse to move into a when you need to judge, if there is a timer to clear the timer before showing B.

When the user leaves a triggering event A, the data card div is delayed for 0.5 seconds before it closes, the user has enough time to do the appropriate operation, and when the mouse is moved into the data card B, the timer that is being timed to close B in B is closed.

The complete code is as follows:

<! DOCTYPE html>  

JS section:

<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>

Attention matters

1, trigger the event with mouseover rather than MouseMove.

MouseOver: Triggers when the mouse moves over the target element.

MouseMove: The mouse is constantly triggered as it moves inside the element.

So use Mouseover,mousemove to consume resources.

For more information, refer to: http://www.cnblogs.com/starof/p/4106904.html

2, call timer before declaring

If you do not declare it, the timer will not be declared until the first mouse move, so the first time the mouse is moved the error is not declared.

3. You must first clear the timer before calling the MouseOver event

If not cleared, timing 0.5s will automatically turn off B

Three, packaged into a common function

Considering this feature is more general, so encapsulated a bit. Because JS needs to deal with some compatibility issues, so use jquery to write.

/** * @Description mouse hover to display ohook on Omsgbox. * @Author Liuxiaoyan * @Date 2016-03-24 15:01:13 * @Last Modified By:liuxiaoyan * @Last Modified time:2016-03-24 15:0 1:13//** * @param ohook: elements to be hover * @param omsgbox:hover the element to display * Call Example: 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}; 
})();

The above is a small series to introduce how to achieve a similar QQ friend Avatar hover when the results of the display of Information card (recommended) The full content, hope to be helpful to everyone, if you have questions welcome to my message, small series will promptly reply to everyone, here also thank you for the cloud Habitat Community website support!