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


Posted in Javascript onJune 09, 2016

一、应用场景

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

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

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

hover时显示二维码

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

二、实现

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

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

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

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

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

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 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 #Javascript
Node.js中npm常用命令大全
Jun 09 #Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 #Javascript
Active控件问题小结(附解决办法)
Jun 09 #Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 #Javascript
JavaScript的instanceof运算符学习教程
Jun 08 #Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 #Javascript
You might like
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
JavaScript中的事件处理
2008/01/16 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python修改操作系统时间的方法
2015/05/18 Python
基于python实现KNN分类算法
2020/04/23 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
建筑管理专业求职信
2014/07/28 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
基石观后感
2015/06/12 职场文书
行政处罚事先告知书
2015/07/01 职场文书
感恩教师主题班会
2015/08/12 职场文书
公司与个人合作协议书
2016/03/19 职场文书