基于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 相关文章推荐
jquery的键盘事件修改代码
Feb 24 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 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
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
JS异步错误捕获的一些事小结
2019/04/26 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
python optparse模块使用实例
2015/04/09 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
利用Python计算KS的实例详解
2020/03/03 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
2014迎新年晚会策划方案
2014/02/23 职场文书
信息管理应届生求职信
2014/03/07 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
10的分与合教学反思
2014/04/30 职场文书
2015入党自传书范文
2015/06/26 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server