基于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 相关文章推荐
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
理解JavaScript原型链
Oct 25 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
JS动态显示倒计时效果
Dec 12 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设计模式  Command(命令模式)
2011/06/17 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
编程语言Python的发展史
2014/09/26 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python中static相关知识小结
2018/01/02 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
《风筝》教学反思
2014/04/10 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
人力资源求职信
2014/05/25 职场文书
国庆节演讲稿
2014/05/27 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
简历自我评价范文
2019/04/24 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js