基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

更新时间：2016年06月09日 10:39:02 作者：starof

通过本文给大家介绍鼠标经过好友列表中的好友头像时显示资料卡的效果，非常不错具有参考借鉴价值，感兴趣的朋友一起看下吧

一、应用场景

鼠标hover弹出div，并且鼠标离开后不能马上隐藏，因为这个div上还有功能入口。比如：

鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示：

hover时显示二维码

二、实现

用如下这样一个简单的效果：鼠标hover到A上显示B来模拟

有2种实现方式，推荐第二种，第一种有弊端下面会说。

1、方法一

原理：把触发元素A和要显示元素B放于同一个父级元素内，鼠标经过父级元素时触发显示B。这样鼠标移动到B时仍然处于该父级元素内，则div不会隐藏。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover A show B</title>
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style type="text/css">
#hook { float: left; margin: 10px 0 10px 10px; width: 50px; height: 50px; background-color: #ccc; }
#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }
</style>
</head>
<body>
<div id="hoverWrap">
 <div id="hook">A</div>
 <div id="msg-box">功能模块B</div>
</div>
<script type="text/javascript">
$("#hoverWrap").hover(function(){
 $("#msg-box").toggle();
});
</script>
</body>
</html>

这种方法实现起来比较简单，但需包裹一层父标签且有个弊端：两个元素不能有间距。

2、方法二

原理：鼠标经过A时弹出B，鼠标移出A，设置一个计时器延迟0.5s再关闭B，所以鼠标移入A时需判断，如果有计时器则先清除计时器再显示B。

当用户离开触发事件的A后，资料卡div要延时0.5秒才后关闭，用户拥有足够的时间进行相应的操作，当鼠标移入资料卡B，将B中之前正在计时关闭B的计时器关闭。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover A show B</title>
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<style type="text/css">
#hook { float: left; margin: 10px; width: 50px; height: 50px; background-color: #ccc; }
#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }
</style>
</head>
<body>
<div id="hook">A</div>
<div id="msg-box">功能模块B</div>
<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>
</body>
</html>

js部分:

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

注意事项

1、触发事件用mouseover而非mousemove。

mouseover:鼠标移入目标元素上方时触发。

mousemove:鼠标在元素内部移动时不断触发。

所以用mouseover,mousemove耗资源。

更多信息可参考：http://www.cnblogs.com/starof/p/4106904.html

2、调用timer前先声明

若不声明，则timer在第一次鼠标移出时才会声明，所以第一次鼠标移入时会报错提示timer未声明。

3、调用mouseover事件前必须先清除定时器

若不清除，计时0.5s后会自动关闭B

三、封装成一个通用功能

考虑到这个功能比较通用，所以封装了一下。因为js需要处理一些兼容性问题，所以用jquery来写。

/**
* @Description 鼠标hover到oHook上显示oMsgBox。
* @Author  liuxiaoyan 
* @Date  2016-03-24 15:01:13
* @Last Modified by: liuxiaoyan
* @Last Modified time: 2016-03-24 15:01:13
*/
/**
* @param oHook:要hover上去的元素
* @param oMsgBox:hover上去要显示的元素
* 调用示例：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};
})();

以上所述是小编给大家介绍的基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)的全部内容，希望对大家有所帮助，如果大家有疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

JavaScript中如何判断一个值的类型
在js中有一个运算符可以帮助我们判断一个值的类型，它就是typeof运算符。下面通过本文给大家分享JavaScript中如何判断一个值的类型，需要的朋友参考下吧
2017-09-09
清除js缓存的多种方法总结
下面小编就为大家带来一篇清除js缓存的多种方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
JS非Alert实现网页右下角“未读信息”效果弹窗
这篇文章主要介绍了JS非Alert实现网页右下角“未读信息”效果弹窗的方法,涉及JavaScript动态操作页面元素实现弹窗效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
javascript绘制漂亮的心型线效果完整实例
这篇文章主要介绍了javascript绘制漂亮的心型线效果实现方法,结合完整实例形式分析了JavaScript图形绘制的具体步骤与相关实现技巧,需要的朋友可以参考下
2016-02-02
js操作二级联动实现代码
网上二级（多级）联动的例子也不少，有各种不同的操作方法。我所采用的方法网上也应该有的，不过我还没有看到过。
2010-07-07
前台js对象在后台转化java对象的问题探讨
在开发项目中多次遇到前台js对象在后台转化java对象的问题，下面就为大家介绍下前台js对象转后台java对象，感兴趣的朋友可以了解下
2013-12-12
js滚轮事件兼容性问题需要注意哪些
这篇文章主要为大家详细介绍了js滚轮事件需要注意的兼容性问题,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
JavaScript实现加密与解密详解
这篇文章介绍了JavaScript实现加密与解密详解的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
全面解析多种Bootstrap图片轮播效果
这篇文章主要为大家全面解析多种Bootstrap图片轮播效果，感兴趣的小伙伴们可以参考一下
2016-05-05
用js实现层随着内容大小动态渐变改变推荐
以前做谷歌的小工具时，api里提供了一个很有用的函数，那就是在程序运行时可以使层动态随内容大小而变化，而且是平滑变换，在一些jquery的lightbox里也普遍有这种效果，看起来很酷的样子。
2009-12-12